How to Denote Preferred Break Points for Line Wrapping in HTML Without Using Non-Breaking Spaces?

Denoting Preferred Break Points for Line Wrapping

In HTML, line breaks typically occur at spaces or dashes. However, in certain cases, developers may wish to specify preferred break points for a line, even when there is no space or dash at that specific location.

Consider the following situation: A table cell contains a long list of cereal names that should wrap preferentially after the commas. However, using non-breaking spaces to prevent unwanted breaks may result in unwanted widening of the column.

Suggested Solution:

Instead of using non-breaking spaces, we can utilize inline-block elements to achieve the desired outcome. By wrapping the preferred break points in a element with the CSS class "avoidwrap," we can prevent line breaks from occurring inside those blocks.

Example:

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

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

This approach allows the line to break preferentially after the commas within the elements. However, if the line needs to be wrapped further, it will break after spaces in the smaller fragments.

Note:

The CSS3 text-wrap: avoid behavior provides similar functionality. However, it is important to check browser support before using it in production environments.

The above is the detailed content of How to Denote Preferred Break Points for Line Wrapping in HTML Without Using Non-Breaking Spaces?. For more information, please follow other related articles on the PHP Chinese website!