Home >Web Front-end >CSS Tutorial >How can I prioritize specific line break locations in HTML without using
How can I prioritize specific line break locations in HTML without using or non-breaking spaces?
- Susan SarandonOriginal
- 2024-10-27 04:06:29444browse
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