Wie schneide ich Text in Tabellenzellen mit CSS richtig ab?

Abschneiden von Text in Tabellenzellen mit CSS Text-Overflow

Im Webdesign die Notwendigkeit, Text zu verarbeiten, der die Breite von Tabellenzellen überschreitet kommt häufig vor. Mithilfe von CSS können Sie Text mit Auslassungspunkten abschneiden, um einen Umbruch zu verhindern und gleichzeitig ein prägnantes und organisiertes Tabellenlayout beizubehalten.

Problem: Trotz der Versuche, CSS-Überlauf- und Textüberlaufattribute anzuwenden, Text darin Tabellenzellen werden weiterhin auf mehrere Zeilen umgebrochen oder über die Tabellenbreite hinaus erweitert.

Lösung: Um effektiv zu sein Wenn Sie Text mit Auslassungspunkten abschneiden möchten, müssen Sie außerdem die Eigenschaft „max-width“ für jede Tabellenzellenklasse (td) festlegen. Diese Einschränkung ermöglicht das Beschneiden von Text auf die angegebene Breite.

Hier ist der aktualisierte CSS-Code:

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

Um die Reaktionsfähigkeit sicherzustellen, sollten Sie die Verwendung von max-width: 0px; für unbegrenzte Breitenflexibilität. Sie können auch eine bestimmte Breite für die enthaltende Tabelle festlegen (normalerweise Breite: 100 %;) und die Spaltenbreiten als Prozentsätze der Gesamtbreite definieren.

Zum Beispiel:

table { width: 100%; }
td {
  max-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
td.column_a { width: 30%; }
td.column_b { width: 70%; }

Hinweis: Für Internet Explorer 9 oder niedriger müssen Sie möglicherweise den folgenden HTML-Code hinzufügen, um ein Rendering zu korrigieren Problem:

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

Indem Sie diese Schritte befolgen, können Sie Text in Tabellenzellen effektiv mit Auslassungspunkten abschneiden und so ein sauberes und kontrolliertes Tabellenlayout gewährleisten.

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