How can I prioritize specific line break locations in HTML without using <wbr> or non-breaking spaces?-CSS Tutorial-php.cn

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

Susan Sarandon

Release： 2024-10-27 04:06:29

Original

442 people have browsed it

How can I prioritize specific line break locations in HTML without using <wbr> 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:

Define a CSS class:

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

Copy after login

Wrap the text to be kept together in this class:

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

Copy after login

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"><html>
  <head>
    <style type="text/css">
      span.avoidwrap {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <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>
  </body>
</html></code>

Copy after login

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!