Wie schneidet man langen Text in Tabellenzellen mit CSS richtig ab?

So verwenden Sie CSS-Textüberlauf in einer Tabellenzelle

Es kann vorkommen, dass Sie Text in einer Tabellenzelle anzeigen möchten , aber der Text ist zu lang, um bequem in eine einzelne Zeile zu passen. Sie möchten den Text mit Auslassungspunkten ('...') abschneiden, anstatt ihn in mehrere Zeilen umbrechen zu lassen.

Um dies zu erreichen, können Sie CSS-Eigenschaften wie „text-overflow“ und nutzen 'Überlauf'. Die Verwendung von „white-space: nowrap“ kann jedoch zu einem bestimmten Problem führen: Der Text und seine Zelle werden möglicherweise kontinuierlich nach rechts erweitert und gehen über die vorgesehene Tabellenbreite hinaus.

Um dieses Problem zu beheben, müssen Sie festlegen CSS-Eigenschaft „max-width“ für jede „td“-Klasse. Durch die Einstellung „max-width“ wird sichergestellt, dass das Überlaufverhalten wie erwartet funktioniert:

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

In responsiven Layouts können Sie „max-width“ verwenden, um die Mindestbreite der Spalte anzugeben. Alternativ können Sie für unbegrenzte Flexibilität auch „max-width: 0“ verwenden. Sie sollten auch eine Breite für die enthaltende Tabelle festlegen (z. B. Breite: 100 %). Legen Sie die Breite jeder Spalte als Prozentsatz der Gesamtbreite fest:

table {
  width: 100%;
}

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

td.column_a {
  width: 30%;
}

td.column_b {
  width: 70%;
}

Beachten Sie, dass ein für IE 9 (oder niedriger) spezifisches Tabellenlayoutproblem möglicherweise zusätzlichen HTML-Code erfordert:

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

Das obige ist der detaillierte Inhalt vonWie schneidet man langen Text in Tabellenzellen mit CSS richtig ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!