How to Control Line Breaks in HTML Tables When You Need Them to Occur at Specific Points?

Preferred Line Breaks in HTML

Creating web content often involves displaying text within tables, where line breaks are necessary to prevent content from overflowing. However, there might be a preference for line breaks to occur at specific points.

Designating Preferred Break Points

In the example provided, a table cell contains a list of cereals separated by commas. The desired behavior is for line breaks to occur after the commas, before spaces. However, HTML does not natively provide a way to specify preferred break points.

Avoiding Non-Breaking Spaces

Inserting non-breaking spaces can force the line break to occur at a specific point, but it also increases the text width unconditionally. To avoid this, an alternative approach is needed.

Text-Wrap Property

CSS3 introduced the text-wrap property, which allows control over line breaks in text. However, attempts to use text-wrap: avoid proved unsuccessful in the example.

Inline Block Display

Instead, the display: inline-block property can be used in conjunction with a wrapper element. This effectively creates a "block" of text within the cell that can wrap independently of the surrounding text.

Example

To implement the desired behavior, the following CSS and HTML can be used:

<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>

Effect

By using the avoidwrap class, the cereal names are kept together and line breaks occur at the commas, as desired. If the line needs to be further wrapped, the cereal names will then break at the spaces.

The above is the detailed content of How to Control Line Breaks in HTML Tables When You Need Them to Occur at Specific Points?. For more information, please follow other related articles on the PHP Chinese website!