it-swarm.com.de

CSS-Textüberlauf in einer Tabellenzelle?

Ich möchte CSS text-overflow in einer Tabellenzelle verwenden. Wenn der Text zu lang ist, um in eine Zeile zu passen, wird er mit einer Ellipse beschnitten, anstatt in mehrere Zeilen umbrochen zu werden. Ist das möglich?

Ich habe es versucht:

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

Aber der white-space: nowrap scheint den Text (und seine Zelle) kontinuierlich nach rechts zu erweitern und die Gesamtbreite der Tabelle über die Breite ihres Containers hinaus zu verschieben. Ohne sie wird der Text jedoch weiterhin in mehrere Zeilen umgebrochen, wenn er auf den Rand der Zelle trifft.

454
daGUY

Um Text mit einer Ellipse zu beschneiden, wenn er über eine Tabellenzelle hinausläuft, müssen Sie die CSS-Eigenschaft max-width für jede Klasse td festlegen, damit der Überlauf funktioniert. Es sind keine zusätzlichen Layout-Divs erforderlich

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

Für ansprechende Layouts; Verwenden Sie die CSS-Eigenschaft max-width, um die effektive Mindestbreite der Spalte anzugeben, oder verwenden Sie einfach max-width: 0;, um uneingeschränkte Flexibilität zu gewährleisten. Außerdem benötigt die enthaltende Tabelle eine bestimmte Breite, normalerweise width: 100%;, und die Breite der Spalten wird normalerweise als Prozentsatz der Gesamtbreite festgelegt

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

Historisch: Für IE 9 (oder weniger) muss dies in Ihrem HTML-Code enthalten sein, um ein IE-spezifisches Rendering-Problem zu beheben

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

Die Angabe eines max-width oder einer festen Breite funktioniert nicht in allen Situationen, und die Tabelle sollte fließend sein und die Zellen automatisch voneinander trennen. Dafür sind Tische da.

Verwenden Sie dies: 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: '&nbsp;';
    visibility: hidden;
}
.Ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;
}

Funktioniert mit IE9 und anderen Browsern.

60
AnthumChris

Warum passiert das?

Es scheint dieser Abschnitt auf w3.org legt nahe, dass der Textüberlauf nur für Blockelemente gilt :

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  

Das MDN sagt dasselbe .

Dies jsfiddle hat Ihren Code (mit ein paar Debug-Modifikationen), der gut funktioniert, wenn er auf ein div anstatt auf ein td angewendet wird. Es hat auch die einzige Problemumgehung, an die ich schnell denken könnte, indem ich den Inhalt von td in einen enthaltenden div -Block packe. Für mich sieht das jedoch nach "hässlichem" Markup aus, und ich hoffe, dass jemand anderes eine bessere Lösung hat. Der Code zum Testen sieht folgendermaßen aus:

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>
37
Jeroen

Für den Fall, dass Sie keine feste Breite festlegen möchten

Mit der folgenden Lösung können Sie einen langen Inhalt für Tabellenzellen festlegen, der jedoch weder die Breite der übergeordneten Tabelle noch die Höhe der übergeordneten Zeile beeinflussen darf. Zum Beispiel, wenn Sie eine Tabelle mit width:100% haben möchten, die die Funktion zur automatischen Größenänderung weiterhin auf alle anderen Zellen anwendet. Nützlich in Datengittern mit der Spalte "Notizen" oder "Kommentar" oder ähnlichem.

enter image description here

Fügen Sie diese 3 Regeln zu Ihrem CSS hinzu:

.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;
}

Formatieren Sie HTML wie folgt in jeder Tabellenzelle, in der dynamischer Text überlaufen soll:

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

Wenden Sie außerdem das gewünschte min-width (oder keines) auf die Tabellenzelle an.

Natürlich die Geige: https://jsfiddle.net/9wycg99v/23/

24
Alph.Dev

Es scheint, dass, wenn Sie table-layout: fixed; für das table -Element angeben, Ihre Stile für td wirksam werden sollten. Dies wirkt sich jedoch auch auf die Größe der Zellen aus.

Sitepoint behandelt die Tabellenlayoutmethoden hier ein wenig: http://reference.sitepoint.com/css/tableformatting

20
jongala

Wenn Sie nur möchten, dass die Tabelle automatisch angelegt wird

Ohne mit max-width oder prozentualen Spaltenbreiten oder table-layout: fixed usw.

https://jsfiddle.net/tturadqq/

Wie es funktioniert:


Schritt 1: Lassen Sie einfach das Tabellen-Auto-Layout sein Ding machen.

Wenn es eine oder mehrere Spalten mit viel Text gibt, werden die anderen Spalten so weit wie möglich verkleinert, und der Text der langen Spalten wird umgebrochen:

enter image description here


Schritt 2: Wickeln Sie den Zellinhalt in ein Div und setzen Sie dieses Div auf max-height: 1.1em

(Die zusätzlichen 0.1em sind für Zeichen, die etwas unterhalb der Textbasis gerendert werden, wie das Ende von 'g' und 'y'.)

enter image description here


Schritt 3: Setze title auf die divs

Dies ist gut für die Zugänglichkeit und notwendig für den kleinen Trick, den wir gleich anwenden werden.

enter image description here


Schritt 4: Fügen Sie ein CSS ::after in das div ein

Dies ist das schwierige Stück. Wir setzen einen CSS ::after mit content: attr(title), positionieren diesen dann über dem div und setzen text-overflow: Ellipsis. Ich habe es hier rot gefärbt, um es deutlich zu machen.

(Beachten Sie, dass die lange Spalte jetzt eine abschließende Ellipse hat.)

enter image description here


Schritt 5: Setzen Sie die Farbe des Div-Texts auf transparent

Und wir sind fertig!

enter image description here

13

Wenn es sich um eine prozentuale Tabellenbreite handelt oder Sie keine feste Breite für die Tabellenzelle festlegen können. Sie können table-layout: fixed; anwenden, damit es funktioniert.

_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>_
7
Stickers

Wickeln Sie den Zellinhalt in einen flexiblen Block. Als Bonus passt die Zellenautomatik die sichtbare Breite an.

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>
4
abbr

Ich habe dies mit einem absolut positionierten div innerhalb der Zelle (relativ) gelöst.

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

Das ist es. Dann können Sie entweder einen top: -Wert zum div hinzufügen oder ihn vertikal zentrieren:

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

Um etwas Platz auf der rechten Seite zu bekommen, können Sie die maximale Breite etwas reduzieren.

2
Kjetil Hansen