How to Force Line Breaks in HTML Using the `span.avoidwrap` Class?

Creating Designated Line Break Points in HTML

In HTML, line breaks are typically determined by the text's natural whitespace characters (e.g., spaces, commas). However, for certain scenarios, it may be desirable to specify a preferred spot for a line break.

Designated Line Breaks with span.avoidwrap

To implement a designated line break point, use the span.avoidwrap class. This class defines span elements as inline blocks, which are rendered as single units rather than separate words. By enclosing the desired text within tags, the line-wrapping algorithm will prioritize breaks at the beginning of the span element.

Example:

Consider the following HTML code:

<code class="html"><table border="1" cellspacing="0" cellpadding="0">
<tr>
    <td>
        <div style="width: 180px;">
            <table border="1" cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    lorem ipsum
                </td>
                <td>
                    <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>
                </td>
                <td>
                    lorem ipsum
                </td>
            </tr>
            </table>
        </div>
    </td>
</tr>
</table></code>

In this example, the text "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" is wrapped within a span.avoidwrap element. This indicates to the browser that a line break should be made at the beginning of the span, resulting in the line breaking after "Rice Krispies":

<code class="html">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</code>

Note: While the text-wrap: avoid CSS property provides a similar functionality, it may not be supported by all browsers.

The above is the detailed content of How to Force Line Breaks in HTML Using the `span.avoidwrap` Class?. For more information, please follow other related articles on the PHP Chinese website!