How can I prioritize specific line break locations in HTML without using or non-breaking spaces?

or non-breaking spaces? " />

Designating Preferred Line Break Locations

In HTML, line breaks typically occur at spaces or commas. However, in situations where you want to force a line break at a specific location, there is a technique to prioritize preferred breaks.

To designate a preferred line break location without using non-breaking spaces, you can utilize the following approach:

1. Define a CSS class:

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

2. Wrap the text to be kept together in this class:

   <code class="html"><span class="avoidwrap">Text to keep together</span></code>

This method sets the wrapped text as an inline-block, preventing it from breaking within its own boundaries. The line-wrapping algorithm will first attempt to break at the specified preferred locations (e.g., commas) before considering spaces within the inline-block.

For example, the following code snippet:

<code class="html">
  
    <style type="text/css">
      span.avoidwrap {
        display: inline-block;
      }
    </style>
  
  
    <div class="box">
      <table>
        <tr>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
        </tr>
        <tr>
          <td>lorem ipsum</td>
          <td>
            <span class="avoidwrap">Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies</span>
            <br>
            <span class="avoidwrap">Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K</span>
            <br>
            <span class="avoidwrap">Froot Loops, Apple Jacks</span>
          </td>
          <td>lorem ipsum</td>
        </tr>
      </table>
    </div>
  
</code>

Will result in the line breaks being made at the designated comma locations, keeping the text within each inline-block together.

The above is the detailed content of How can I prioritize specific line break locations in HTML without using or non-breaking spaces?. For more information, please follow other related articles on the PHP Chinese website!