CSS text-overflow in einer Tabellenzelle?

Question

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

Ich habe es so versucht:

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

Aber das white-space: nowrap scheint den Text (und seine Zelle) kontinuierlich nach rechts auszudehnen und die Gesamtbreite der Tabelle über die Breite ihres Containers hinaus zu schieben. Ohne diese Eigenschaft jedoch wird der Text weiterhin auf mehrere Zeilen umgebrochen, wenn er den Rand der Zelle erreicht.

Answer 1

Es hat für mich funktioniert

table {
    width: 100%;
    table-layout: fixed;
}
td {
   text-overflow: ellipsis;
   white-space: nowrap;
}

Answer 2

Für saubere autosized Tabellen mit Ellipsis

Wenn Sie die Tabellen-Tags loswerden können, hat modernes CSS eine meiner Meinung nach viel sauberere Lösung verfügbar: die Verwendung des grid-Layouts.

Sie brauchen einfach ein div oder ähnliches, um die Tabelle darzustellen, mit Zellen darin, z.B.:

  text
  text
  text
  text

Jetzt, wenn ich möchte, dass dies eine 2x2 Tabelle ist, dann ist es einfach eine Frage der Definition von zwei autosized Spalten für das Raster:

.table {
  display: grid;
  grid-template-columns: auto auto;
}

Für die Zellen benötigen Sie einfach ein paar mehr Zeilen CSS:

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

Fertig! Wenn Sie sicherstellen müssen, dass einige Spalten breiter sind als andere, funktionieren die fr-Einheiten oder andere verfügbare Optionen für die Spaltenvorlage gut.

.table {
  display: grid;
  grid-template-columns: auto auto;
}
.cell {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid black;
}

  long long long long long long long long long long long long long long long long long long long long long long long long
  text
  text
  text

Answer 3

XML

Ihr überlaufender Inhalt hier.

CSS

td div
{
 max-height: 30vh;
 overflow: auto;
}

Es ergibt keinen Sinn, mit dem Gesamten table für diesen sehr spezifischen Zweck herumzuspielen. Ja, manchmal ist es in Ordnung, ein zusätzliches Element hinzuzufügen, wenn Sie ausdrücklich daran arbeiten, nicht ein weiteres 600-divs-verschachteltes Twitter/Facebook "Entwickler" zu sein.

Answer 4

Dies ist die Version, die in IE 9 funktioniert.

http://jsfiddle.net/s27gf2n8/

                Erste Reihe. Lorem Ipsum ist einfach ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist seit den 1500er Jahren der Standard-Blindtext der Industrie, als ein unbekannter Drucker eine Galleyart von Typ nahm und sie durcheinander brachte, um ein Typmusterbuch zu erstellen. Es hat nicht nur fünf Jahrhunderte überlebt, sondern auch den Sprung in die elektronische Satztechnologie geschafft und bleibt im Wesentlichen unverändert. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem Ipsum-Passagen populär gemacht und in letzter Zeit auch mit Desktop-Publishing-Software wie Aldus PageMaker einschließlich Versionen von Lorem Ipsum.

                Obere rechte Zelle.

                Zweite Reihe - Lorem Ipsum ist einfach ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist seit den 1500er Jahren der Standard-Blindtext der Industrie, als ein unbekannter Drucker eine Galleyart von Typ nahm und sie durcheinander brachte, um ein Typmusterbuch zu erstellen. Es hat nicht nur fünf Jahrhunderte überlebt, sondern auch den Sprung in die elektronische Satztechnologie geschafft und bleibt im Wesentlichen unverändert. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem Ipsum-Passagen populär gemacht und in letzter Zeit auch mit Desktop-Publishing-Software wie Aldus PageMaker einschließlich Versionen von Lorem Ipsum.

                Untere rechte Zelle.