Overflow: hidden neden bir <td> içinde çalışmıyor?

Her zaman belirli bir genişlikte olmasını istediğim bir masa hücrem var. Ancak, büyük boşluksuz metin dizeleri ile çalışmaz. İşte bir test durumu:

td {
  border: solid green 1px;
  width: 200px;
  overflow: hidden;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Kutuyu genişletmek yerine metnin kutunun kenarından kesilmesini nasıl sağlayabilirim?

İşte aynı sorun .

Eğer set gerekir table-layout:fixed ve yanı sıra, masa elemanı üzerinde bir uygun genişlikte overflow:hiddenve white-space: nowrapTablo hücreleri üzerinde.

Örnekler

Sabit genişlikli sütunlar

Tablonun genişliği, sabit genişlikteki hücre (ler) ile aynı (veya daha küçük) olmalıdır.

Bir sabit genişlikte sütun ile:

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 100px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Birden çok sabit genişlikte sütunla:

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 200px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Sabit ve değişken genişlikli sütunlar

Tablo için bir genişlik ayarlanmalıdır , ancak herhangi bir ekstra genişlik basitçe akışkan hücre (ler) tarafından alınır.

Birden çok sütun, sabit genişlik ve değişken genişlik ile:

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  background: #F00;
  padding: 20px;
  border: solid 1px #000;
}
tr td:first-child {
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

TD'ler tam olarak böyle. Bunun nedeni, TD öğesinin "display" özelliğinin doğal olarak "blok" yerine "tablo hücresi" olarak ayarlanmış olması olabilir.

Sizin durumunuzda, alternatif, TD'nin içeriğini bir DIV'ye sarmak ve DIV'ye genişlik ve taşma uygulamak olabilir.

<td style="border: solid green 1px; width:200px;">
    <div style="width:200px; overflow:hidden;">
        This_is_a_terrible_example_of_thinking_outside_the_box.
    </div>
</td>

Başa çıkmanız gereken bazı dolgu veya hücre dolgusu sorunları olabilir ve satır içi stilleri kaldırmanız ve bunun yerine harici css kullanmanız daha iyi olur, ancak bu bir başlangıç ​​olmalıdır.

CSS'yi table-layout:fixed;(ve bazen width:<any px or %>) TABLO'ya uygulayın ve white-space: nowrap; overflow: hidden;TD'de stil uygulayın. Ardından, doğru hücre veya sütun öğelerinde CSS genişliklerini ayarlayın .

Önemli bir şekilde, sabit yerleşimli tablo sütun genişlikleri, tablonun ilk satırındaki hücre genişlikleri tarafından belirlenir. İlk satırda TH öğeleri varsa ve genişlikler TD'ye uygulanıyorsa (ve TH'ye değil), bu durumda genişlik yalnızca TD'nin içeriği için geçerlidir (beyaz boşluk ve taşma göz ardı edilebilir); tablo sütunları, ayarlanan TD genişliğinden bağımsız olarak eşit olarak dağılır (çünkü [ilk satırda TH'de] belirtilmiş genişlik yoktur) ve sütunlar [hesaplanmış] eşit genişliğe sahip olacaktır; tablo, sonraki satırlarda TD genişliğine bağlı olarak sütun genişliğini yeniden hesaplamayacaktır. Tablonun karşılaşacağı ilk hücre öğelerinin genişliğini ayarlayın.

Alternatif olarak ve sütun genişliklerini ayarlamanın en güvenli yolu , her sabit genişlikte COL için ayarlanan CSS genişliği ile tablodaki <COLGROUP>ve <COL>etiketlerini kullanmaktır . Tablo, sütun genişliklerini önceden bildiğinde, hücre genişliğiyle ilgili CSS daha güzel oynar.

Belirli bir konuya aşina değilim, ancak td'nin içine bir div vb. Yapıştırabilir ve bunun üzerine taşma ayarlayabilirsiniz.

En iyi çözüm, sıfır genişliğe sahip bir tablo hücresine bir div koymaktır. Tbody tablo hücreleri, genişliklerini tead tarafından tanımlanan genişliklerden miras alır. Konum: göreceli ve negatif kenar boşluğu işe yaramalı!

İşte bir ekran görüntüsü: https://flic.kr/p/nvRs4j

<body>
<!-- SOME CSS -->
<style>
    .cropped-table-cells,
    .cropped-table-cells tr td { 
        margin:0px;
        padding:0px;
        border-collapse:collapse;
    }
    .cropped-table-cells tr td {
        border:1px solid lightgray;
        padding:3px 5px 3px 5px;
    }
    .no-overflow {
        display:inline-block;
        white-space:nowrap;
        position:relative; /* must be relative */
        width:100%; /* fit to table cell width */
        margin-right:-1000px; /* technically this is a less than zero width object */
        overflow:hidden;
    }
</style>

<!-- CROPPED TABLE BODIES -->
<table class="cropped-table-cells">
    <thead>
        <tr>
            <td style="width:100px;" width="100"><span>ORDER<span></td>
            <td style="width:100px;" width="100"><span>NAME<span></td>
            <td style="width:200px;" width="200"><span>EMAIL</span></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="no-overflow">123</span></td>
            <td><span class="no-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td>
            <td><span class="no-overflow">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
    </tbody>
</table>
</body>

İşte size bir çözüm ama neden işe yaradığını gerçekten anlamıyorum:

<html><body>
  <div style="width: 200px; border: 1px solid red;">Test</div>
  <div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels.  These pretzels are making me thirsty.</div>
  <div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
  This_is_a_terrible_example_of_thinking_outside_the_box.
  </div>
  <table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
   <td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
    This_is_a_terrible_example_of_thinking_outside_the_box.
   </div></td>
  </tr></table>
</body></html>

Yani hücre içeriğini bir div'e sarmak.

: Sen tablonun tarzı özelliklerini ayarlamak gerekecek widthve table-layout: fixed;izin 'taşma: hidden;' öznitelik düzgün çalışır.

Imo bu, widthstil özniteliğiyle div'leri kullanmaktan daha iyi çalışır , özellikle dinamik yeniden boyutlandırma hesaplamaları için kullanıldığında, tablo daha basit bir DOM'a sahip olur, bu da doldurma ve kenar boşluğu düzeltmeleri gerekmediğinden manipülasyonu kolaylaştırır.

Ek olarak, tüm hücreler için değil, yalnızca ilk satırdaki hücreler için genişliği ayarlamanız gerekir.

Bunun gibi:

<table style="width:0px;table-layout:fixed">
<tr>
    <td style="width:60px;">
        Id
    </td>
    <td style="width:100px;">
        Name
    </td>
    <td style="width:160px;overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
<tr>
    <td style="">
        Id
    </td>
    <td style="">
        Name
    </td>
    <td style="overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
</table>

Az önce benzer bir sorun yaşadım ve ilk başta <div>içini kullanmak zorunda kaldım <td>(John MacIntyre'nin çözümü çeşitli nedenlerle benim için işe yaramadı).

Not o olsa <td><div>...</div></td>bunun yerine bir kullanıyorum bir div için geçerli bir yerleşim değil <span>ile display:block;sette. Şimdi iyi doğruluyor ve çalışıyor.

İşe yarayan en kolay ve en basit çözüm:

table { table-layout: fixed }

table td {     
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

daha basit hale getirmek için td içine taşmayı otomatik olarak yöneten bir metin alanı koymayı öneriyorum

<td><textarea autofocus>$post_title</textarea></td>

iyileştirilmesi gerekiyor

<style>
    .col {display:table-cell;max-width:50px;width:50px;overflow:hidden;white-space: nowrap;}
</style>
<table>
    <tr>
        <td class="col">123456789123456789</td>
    </tr>
</table>

123456 değerini görüntüler