CSS-Textüberlauf in einer Tabellenzelle?

Ich möchte CSS text-overflowin einer Tabellenzelle verwenden. Wenn der Text zu lang ist, um in eine Zeile zu passen, wird er mit einem Auslassungszeichen abgeschnitten, anstatt in mehrere Zeilen umgebrochen zu werden. Ist das möglich?

Ich habe es versucht:

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

Aber das white-space: nowrapscheint den Text (und seine Zelle) kontinuierlich nach rechts auszudehnen 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 den Rand der Zelle erreicht.

Um Text mit Auslassungspunkten zu schneiden, wenn er eine Tabellenzelle überläuft, müssen Sie die max-widthCSS-Eigenschaft für jede tdKlasse 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 reaktionsschnelle Layouts; Verwenden Sie die max-widthCSS-Eigenschaft, um die effektive Mindestbreite der Spalte anzugeben, oder verwenden Sie sie nur max-width: 0;für unbegrenzte Flexibilität. Außerdem benötigt die enthaltende Tabelle normalerweise eine bestimmte Breite, width: 100%;und für die Spalten wird normalerweise die Breite 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]-->

Das Angeben einer max-widthoder einer festen Breite funktioniert nicht in allen Situationen, und die Tabelle sollte flüssig sein und ihre Zellen automatisch platzieren. 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: ' ';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Funktioniert mit IE9 und anderen Browsern.

Warum passiert das?

Es scheint, dass dieser Abschnitt auf w3.org vorschlägt, 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 .

Diese jsfiddle hat Ihren Code (mit ein paar Debug-Änderungen), der gut funktioniert, wenn er auf a divanstelle von a angewendet wird td. Es hat auch die einzige Problemumgehung, an die ich schnell denken könnte, indem ich den Inhalt von tdin einen enthaltenden divBlock einbinde. Das sieht für mich jedoch nach "hässlichem" Markup aus, also hoffe ich, 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>

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

Mit der folgenden Lösung können Sie Tabellenzelleninhalte erstellen, die lang sind, jedoch weder die Breite der übergeordneten Tabelle noch die Höhe der übergeordneten Zeile beeinflussen dürfen. Wenn Sie beispielsweise eine Tabelle haben möchten, wird die width:100%automatische Größenfunktion weiterhin auf alle anderen Zellen angewendet. Nützlich in Datengittern mit der Spalte "Notizen" oder "Kommentar" oder so.

Fügen Sie Ihrem CSS diese 3 Regeln 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 Sie einen dynamischen Textüberlauf wünschen:

<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 zusätzlich die gewünschte min-width(oder gar keine) auf die Tabellenzelle an.

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

Es scheint, dass, wenn Sie table-layout: fixed;auf dem tableElement angeben , dann Ihre Stile fürtd wirksam werden. Dies wirkt sich jedoch auch auf die Größe der Zellen aus.

Sitepoint erläutert die Methoden für das Tabellenlayout hier ein wenig: http://reference.sitepoint.com/css/tableformatting

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

Ohne Verwendung max-widthoder prozentuale Spaltenbreiten table-layout: fixedusw.

https://jsfiddle.net/tturadqq/

Wie es funktioniert:

Schritt 1: Lassen Sie einfach das automatische Layout der Tabelle seine Sache machen.

Wenn eine oder mehrere Spalten mit viel Text vorhanden sind, werden die anderen Spalten so weit wie möglich verkleinert und der Text der langen Spalten umbrochen:

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

(Das zusätzliche 0.1em gilt für Zeichen, die etwas unterhalb der Textbasis gerendert werden, z. B. das Ende von 'g' und 'y').

Schritt 3: Stellen Sie titledie Divs ein

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

Schritt 4: Fügen Sie ::afterdem div ein CSS hinzu

Das ist das Knifflige. Wir setzen ein CSS::after mit content: attr(title), positionieren es dann über dem div und setzen text-overflow: ellipsis. Ich habe es hier rot gefärbt, um es klar zu machen.

(Beachten Sie, dass die lange Spalte jetzt eine Endellipse hat.)

Schritt 5: Stellen Sie die Farbe des Div-Textes auf ein transparent

Und wir sind fertig!

Wenn die prozentuale Tabellenbreite angegeben ist oder Sie keine feste Breite für die Tabellenzelle festlegen können. Sie können sich bewerben table-layout: fixed;, 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>

Wickeln Sie den Zelleninhalt in einen Flexblock. Als Bonus passt die Zelle automatisch 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>

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 dem div entweder einen top: value hinzufügen oder ihn vertikal zentrieren:

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

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

Dies funktionierte in meinem Fall sowohl in Firefox als auch in Chrome:

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

Dies ist die Version, die in IE 9 funktioniert.

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>