Home > Article > Web Front-end > How can I prioritize specific line break locations in HTML without using or non-breaking spaces?

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

Susan SarandonOriginal: 2024-10-27 04:06:29365browse

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>

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

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!

css html define for break using class this location

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Create a Placeholder Mixin in SCSS/CSS that Works With Colons and Semicolons?Next article：How to Create a Placeholder Mixin in SCSS/CSS that Works With Colons and Semicolons?

See more

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

Related articles