Wie erreicht man einen CSS-Textüberlauf mit Auslassungspunkten in Tabellenzellen?

CSS-Textüberlauf in Tabellenzellen

Das Erreichen eines Textüberlaufs in Tabellenzellen kann eine Herausforderung sein. Während die Verwendung von text-overflow: Auslassungspunkten allein möglicherweise nicht ausreicht, können wir zusätzliche CSS-Eigenschaften verwenden, um den gewünschten Effekt zu erzielen.

Lösung

So beschneiden Sie Text mit Auslassungspunkten und Um den Umbruch zu verhindern, legen wir die Eigenschaft „max-width“ für jede Tabellenzelle (td-Element) fest. Dies gibt die maximale Breite an, die für den Text verfügbar ist, bevor er abgeschnitten wird. Darüber hinaus sorgt overflow:hided dafür, dass überschüssiger Text ausgeblendet wird.

CSS-Code

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

Responsive Layouts

Für Bei responsiven Layouts kann die Eigenschaft „max-width“ verwendet werden, um die effektive Mindestbreite der Spalte zu definieren. Alternativ können Sie max-width: 0; ermöglicht grenzenlose Flexibilität. Die enthaltende Tabelle sollte eine bestimmte Breite haben, normalerweise festgelegt als Breite: 100 %;.

Historischer Hinweis

Für Internet Explorer 9 und frühere Versionen ist ein zusätzlicher < Stil> -Tag muss im HTML enthalten sein, um Rendering-Probleme zu beheben:

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

Das obige ist der detaillierte Inhalt vonWie erreicht man einen CSS-Textüberlauf mit Auslassungspunkten in Tabellenzellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!