Wie kann man Zeilenumbrüche in HTML-Tabellen steuern, wenn sie an bestimmten Stellen auftreten sollen?

Bevorzugte Zeilenumbrüche in HTML

Das Erstellen von Webinhalten erfordert häufig die Anzeige von Text in Tabellen, in denen Zeilenumbrüche erforderlich sind, um ein Überlaufen des Inhalts zu verhindern. Möglicherweise werden jedoch Zeilenumbrüche an bestimmten Punkten bevorzugt.

Festlegen bevorzugter Unterbrechungspunkte

Im bereitgestellten Beispiel enthält eine Tabellenzelle eine Liste von Getreide durch Kommas getrennt. Das gewünschte Verhalten besteht darin, dass Zeilenumbrüche nach den Kommas und vor Leerzeichen erfolgen. Allerdings bietet HTML nativ keine Möglichkeit, bevorzugte Unterbrechungspunkte anzugeben.

Vermeiden geschützter Leerzeichen

Das Einfügen geschützter Leerzeichen kann dazu führen, dass ein Zeilenumbruch erfolgt an einer bestimmten Stelle, sondern erhöht auch bedingungslos die Textbreite. Um dies zu vermeiden, ist ein alternativer Ansatz erforderlich.

Text-Wrap-Eigenschaft

CSS3 hat die Text-Wrap-Eigenschaft eingeführt, die die Kontrolle über Zeilenumbrüche im Text ermöglicht. Allerdings erwiesen sich Versuche, Text-Wrap: Avoid zu verwenden, im Beispiel als erfolglos.

Inline-Block-Anzeige

Stattdessen kann die Eigenschaft display: inline-block verwendet werden Verbindung mit einem Wrapper-Element. Dadurch wird effektiv ein „Textblock“ innerhalb der Zelle erstellt, der unabhängig vom umgebenden Text umbrochen werden kann.

Beispiel

Um das gewünschte Verhalten zu implementieren, müssen die folgenden CSS- und HTML kann verwendet werden:

<code class="css">span.avoidwrap { display:inline-block; }</code>

<code class="html"><td>
  <span class="avoidwrap">Honey Nut Cheerios,</span>
  <span class="avoidwrap">Wheat Chex,</span>
  <span class="avoidwrap">Grape-Nuts,</span>
  <span class="avoidwrap">Rice Krispies,</span>
  <span class="avoidwrap">Some random cereal with a very long name,</span>
  <span class="avoidwrap">Honey Bunches of Oats,</span>
  <span class="avoidwrap">Wheaties,</span>
  <span class="avoidwrap">Special K,</span>
  <span class="avoidwrap">Froot Loops,</span>
  <span class="avoidwrap">Apple Jacks</span>
</td></code>

Effekt

Durch die Verwendung der Vermeidungswrap-Klasse werden die Getreidenamen zusammengehalten und an den Kommas treten Zeilenumbrüche auf. wie gewünscht. Wenn die Zeile weiter umbrochen werden muss, werden die Getreidenamen an den Leerzeichen umgebrochen.

Das obige ist der detaillierte Inhalt vonWie kann man Zeilenumbrüche in HTML-Tabellen steuern, wenn sie an bestimmten Stellen auftreten sollen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!