Przepełnienie tekstu CSS w komórce tabeli?

Chcę użyć CSS text-overfloww komórce tabeli, tak aby jeśli tekst był zbyt długi, aby zmieścił się w jednym wierszu, będzie przycinany wielokropkiem zamiast zawijania do wielu wierszy. czy to możliwe?

Próbowałem tego:

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

white-space: nowrapWygląda jednak na to, że tekst (i jego komórka) stale się rozszerzają w prawo, przesuwając całkowitą szerokość tabeli poza szerokość kontenera. Bez tego jednak tekst nadal zawija się do wielu linii, gdy uderza o krawędź komórki.

Aby wyciąć tekst z elipsą, gdy przepełnia komórkę tabeli, musisz ustawić max-widthwłaściwość CSS dla każdej tdklasy, aby przepełnienie działało. Nie są wymagane żadne dodatkowe elementy div układu

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

Dla responsywnych układów; użyj max-widthwłaściwości CSS, aby określić efektywną minimalną szerokość kolumny, lub po prostu użyj max-width: 0;dla nieograniczonej elastyczności. Ponadto tabela zawierająca będzie zwykle wymagać określonej szerokości, width: 100%;a kolumny zwykle będą miały szerokość ustawioną jako procent całkowitej szerokości

table {
    width: 100%;
}
td {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
td.columnA {
    width: 30%;
}
td.columnB {
    width: 70%;
}

Historyczny: W przypadku IE 9 (lub mniejszej) musisz mieć to w swoim HTML, aby rozwiązać problem z renderowaniem specyficzny dla IE

<!--[if IE]>
<style>
    table {
        table-layout: fixed;
        width: 100px;
    }
</style>
<![endif]-->

Określenie max-widthlub stała szerokość nie działa we wszystkich sytuacjach, a tabela powinna być płynna i automatycznie rozmieszczać komórki. Do tego służą tabele.

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

HTML:

<td class="ellipsis">
    <span>This Text Overflows and is too large for its cell.</span>
</td>

CSS:

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

Działa na IE9 i innych przeglądarkach.

Dlaczego tak się dzieje?

Wygląda na to, że ta sekcja na w3.org sugeruje, że przepełnienie tekstu 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 divzamiast td. Ma również jedyne obejście, o jakim mogłem szybko pomyśleć, owijając zawartość bloku tdzawierającego div. Jednak dla mnie wygląda to na „brzydkie” znaczniki, więc mam nadzieję, że ktoś inny ma lepsze rozwiązanie. Kod do przetestowania wygląda następująco:

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 ustawiać 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 na wysokość wiersza nadrzędnego. Na przykład, jeśli chcesz mieć tabelę, width:100%która nadal stosuje funkcję automatycznego rozmiaru do wszystkich innych komórek. Przydatne w siatkach danych z kolumną „Notatki” lub „Komentarz” czy coś takiego.

Dodaj te 3 reguły 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 następujący sposób w dowolnej komórce tabeli, w której chcesz dynamiczne przepełnienie 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żądaną min-width(lub wcale) do komórki tabeli.

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

Wydaje się, że jeśli podasz table-layout: fixed;na tableelemencie, a następnie swoje style tdpowinny obowiązywać. Wpłynie to również na wielkość komórek.

Sitepoint omawia trochę metody układania tabeli tutaj: http://reference.sitepoint.com/css/tableformatting

Jeśli chcesz, aby tabela automatycznie się układała

Bez użycia max-widthlub procentowych szerokości kolumn table-layout: fixeditp.

https://jsfiddle.net/tturadqq/

Jak to działa:

Krok 1: Po prostu pozwól, aby automatyczny układ tabeli spełnił swoje zadanie.

Gdy jest co najmniej jedna kolumna z dużą ilością tekstu, pozostałe kolumny zostaną maksymalnie zmniejszone, a następnie zawinięte w tekst długich kolumn:

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

(dodatkowe 0,1em dotyczy znaków, które renderują się nieco poniżej podstawy tekstu, takich jak ogon „g” i „y”)

Krok 3: Ustaw titlena divs

Jest to dobre ze względu na dostępność i jest konieczne w przypadku małej sztuczki, której użyjemy za chwilę.

Krok 4: Dodaj CSS ::afterdo div

To trudna sprawa. Ustawiamy CSS ::after, za pomocą content: attr(title), a następnie umieszczamy go na div i ustawiamy text-overflow: ellipsis. Pokolorowałem go tutaj na czerwono, aby było jasne.

(Zwróć uwagę, jak długa kolumna ma teraz elipsę ogonową)

Krok 5: Ustaw kolor tekstu div na transparent

I gotowe!

Gdy jest w procentowej szerokości tabeli lub nie można ustawić stałej szerokości w komórce tabeli. Możesz złożyć wniosek, table-layout: fixed;aby działał.

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 bloku elastycznym. Jako bonus, komórka auto dopasowuje widoczną szerokość.

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ędny).

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

Otóż ​​to. Następnie możesz dodać wartość div: do div lub wyśrodkować ją pionowo:

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

Aby uzyskać trochę miejsca po prawej stronie, możesz nieco zmniejszyć maksymalną szerokość.

W moim przypadku działało to zarówno w przeglądarce Firefox, jak i Chrome:

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

To jest 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>