CSS text-overflow w komórce tabeli?

Określenie max-width lub stałej szerokości nie działa we wszystkich sytuacjach, a tabela powinna być płynna i automatycznie odstępować swoje komórki. Po to są stoły. Działa na IE9 i innych przeglądarkach.

Użyj tego: http://jsfiddle.net/maruxa1j/

table {
    width: 100%;
}
.first {
    width: 50%;
}
.ellipsis {
    position: relative;
}
.ellipsis:before {
    content: ' ';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<table border="1">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="ellipsis first"><span>This Text Overflows and is too large for its cell.</span></td>
            <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td>
            <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td>
            <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td>
        </tr>
    </tbody>
</table>

dlaczego tak się dzieje?

Wydaje się ten dział na w3.org sugeruje, że text-overflow dotyczy tylko elementów blokowych :

11.1.  Overflow Ellipsis: the ‘text-overflow’ property

text-overflow      clip | ellipsis | <string>  
Initial:           clip   
APPLIES TO:        BLOCK CONTAINERS               <<<<
Inherited:         no  
Percentages:       N/A  
Media:             visual  
Computed value:    as specified  

MDN mówi to samo.

Ten jsfiddle mA Twój kod (z kilkoma modyfikacjami debugowania), który działa dobrze, jeśli jest zastosowany do div zamiast td. Ma również jedyne obejście, jakie mogłem szybko wymyślić, owijając zawartość td W zawierający div blok. Jednak to wygląda jak "brzydki" znacznik dla mnie, więc mam nadzieję, że ktoś inny ma lepsze rozwiązanie. Kod do przetestowania tego wygląda tak:

td, div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid red;
  width: 80px;
}

Works, but no tables anymore:
<div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div>

Works, but non-semantic markup required:
<table><tr><td><div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div></td></tr></table>

W przypadku, gdy nie chcesz ustawić stałej szerokości na cokolwiek

Poniższe rozwiązanie pozwala mieć zawartość komórki tabeli, która jest długa, ale nie może wpływać na szerokość tabeli nadrzędnej ani wysokość wiersza nadrzędnego. Na przykład, gdy chcesz mieć tabelę z width:100%, która nadal stosuje funkcję auto-size do wszystkich innych komórek. Przydatne w siatkach danych z kolumną "uwagi" lub "komentarz" lub coś takiego.

Dodaj te 3 Zasady do swojego CSS:

.text-overflow-dynamic-container {
    position: relative;
    max-width: 100%;
    padding: 0 !important;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    vertical-align: text-bottom !important;
}
.text-overflow-dynamic-ellipsis {
    position: absolute;
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    width:100%;
    top: 0;
    left: 0;
}
.text-overflow-dynamic-container:after,
.text-overflow-dynamic-ellipsis:after {
    content: '-';
    display: inline;
    visibility: hidden;
    width: 0;
}

Sformatuj HTML w taki sposób w dowolnej komórce tabeli, w której chcesz dynamicznego przepełnienia tekstu:

<td>
  <span class="text-overflow-dynamic-container">
    <span class="text-overflow-dynamic-ellipsis" title="...your text again for usability...">
      //...your long text here...
    </span>
  </span>
</td>

Dodatkowo zastosuj pożądane min-width (lub wcale nie) do komórki tabeli.

Oczywiście skrzypce: https://jsfiddle.net/9wycg99v/23/

Wygląda na to, że jeśli podasz {[0] } na elemencie table, wtedy twoje style dla td powinny zacząć działać. Wpłynie to również na wielkość komórek.

Sitepoint omawia metody tabel-layout trochę tutaj: http://reference.sitepoint.com/css/tableformatting

Jeśli chcesz, aby tabela była automatycznie układana

Bez za pomocą max-width, lub procent szerokości kolumn, lub table-layout: fixed itd.

Https://jsfiddle.net/tturadqq/

Jak to działa:

Krok 1: po prostu pozwól automatycznemu układowi tabeli robić swoje.

Gdy jest jedna lub więcej kolumn z dużą ilością tekstu, zmniejszy pozostałe kolumny tak bardzo, jak to możliwe, a następnie owinie tekst z długiego kolumny:

Krok 2: zawiń zawartość komórki w div, a następnie Ustaw ten div na max-height: 1.1em

(dodatkowe 0.1 em jest dla znaków, które renderują się nieco poniżej podstawy tekstu, jak ogon ' g 'i ' y')

Krok 3: Ustaw {[3] } na div

Jest to dobre dla dostępności i jest niezbędne do małej sztuczki, której użyjemy w chwila.

Krok 4: Dodaj CSS ::after do div

To jest tricky bit. Ustawiamy CSS ::after, z content: attr(title), następnie umieszczamy go na górze div I ustawiamy text-overflow: ellipsis. Zabarwiłem to na Czerwono, żeby było jasne.

(zauważ, że długa kolumna ma teraz tylną elipsę)

Krok 5: Ustaw kolor tekstu div na transparent

I jesteśmy zrobione!

Gdy jest w procentowej szerokości tabeli lub nie można ustawić stałej szerokości w komórce tabeli. Możesz ubiegać się o table-layout: fixed; żeby się udało.

table {
  table-layout: fixed;
  width: 100%;
}
td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid red;
}

<table>
  <tr>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
  </tr>
</table>

Zawiń zawartość komórki w elastyczny blok. Jako bonus, cell auto pasuje do widocznej szerokości.

table {
  width: 100%;
}

div.parent {
  display: flex;
}

div.child {
  flex: 1;
  width: 1px;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

<table>
  <tr>
    <td>
      <div class="parent">
        <div class="child">
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </div>
      <div>
    </td>
  </tr>
</table>

Rozwiązałem to za pomocą absolutnie umieszczonego div wewnątrz komórki (względnego).

td {
    position: relative;
}
td > div {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;        
}

td > div {      
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1.5em; // = line height 
}

Aby uzyskać trochę miejsca po prawej stronie, możesz zmniejszyć max-szerokość trochę.

To działało w moim przypadku, zarówno w Firefox i Chrome:

td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

It is worked for me

table {
    width: 100%;
    table-layout: fixed;
}

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

Jest to wersja, która działa w IE 9.

Http://jsfiddle.net/s27gf2n8/

<div style="display:table; table-layout: fixed; width:100%; " >
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">First row. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Top right Cell.
            </div>
        </div>
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Second row - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Bottom right cell.
            </div>
        </div>
    </div>