Wie kann ich mithilfe von CSS Text mit Auslassungspunkten in Tabellenzellen ausschneiden?

Text mit Auslassungspunkten in Tabellenzellen mithilfe von CSS ausschneiden

Frage:

Können Sie ausschneiden? Text in einer Tabellenzelle mit Auslassungspunkten, anstatt ihn in mehrere umbrechen zu lassen Zeilen?

Lösungsversuch:

Die Verwendung der CSS-Eigenschaften overflow: versteckt, text-overflow: ellipsis und white-space: nowrap funktionierte nicht wie beabsichtigt.

Antwort:

Um überlaufenden Text erfolgreich abzuschneiden In einer Tabellenzelle müssen Sie der td-Klasse die Eigenschaft „max-width“ hinzufügen:

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

Dies legt die maximale Breite für jede Tabellenzelle fest und wendet die anderen Eigenschaften an, um sicherzustellen, dass sie mit Auslassungspunkten abgeschnitten wird wenn der Text die angegebene Breite überschreitet.

In responsiven Layouts können Sie ein dynamisches Maximum verwenden Breite:

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

Zusätzlich erfordert die enthaltende Tabelle eine bestimmte Breite:

table {
  width: 100%;
}

Die Tabellenzellenbreiten können als Prozentsätze festgelegt werden:

td.column_a {
  width: 30%;
}
td.column_b {
  width: 70%;
}

Für Bei älteren Versionen von Internet Explorer (IE 9 oder niedriger) ist dieser zusätzliche Code erforderlich, um ein Rendering-Problem zu beheben:

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

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS Text mit Auslassungspunkten in Tabellenzellen ausschneiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!