When a Line Doesn't Break

Lines typically break when text reaches the parent container's edge. This is standard paragraph behavior. However, this relies on spaces or whitespace between words. CSS offers several properties influencing line breaks, but let's focus on a scenario where expected breaks fail.

What happens when the browser lacks clear break indicators?

Let's create a "tag list" example and then troubleshoot the line-breaking problem. Here's the initial HTML:

• PHP
• JavaScript
• Rust

We'll horizontally arrange list items using CSS:

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: inline;
  padding-right: 5px;
}

The list appears as desired. Now, let's wrap the list in a div with a fixed width:

<div class="tags">
  <ul>
    <li>PHP</li>
    <li>JavaScript</li>
    <li>Rust</li>
  </ul>
</div>

.tags {
  width: 200px;
}

Here's the issue: HTML minification removes whitespace, resulting in:

<div><ul>
<li>PHP</li>
<li>JavaScript</li>
<li>Rust</li>
</ul></div>

The line no longer breaks at 200px. Why? The browser treats the entire list as a single, unbroken word due to the absence of separating characters. Padding doesn't solve this; the entire list remains a single entity.

Forcing Line Breaks with Special Characters

Besides spaces (excluding non-breaking spaces), several characters trigger line breaks:

• Hyphens (-)
• En dashes (–)
• Em dashes (—)
• Question marks (?)
• Zero-width spaces (U 200B or ​)

These breaks occur during rendering; the browser still initially sees the text as a single unit. Adding a list item with one of these characters forces a break. Let's add "Objective-C":

<div>
  <ul>
    <li>PHP</li>
    <li>JavaScript</li>
    <li>Rust</li>
    <li>Objective-C</li>
  </ul>
</div>

Here are three solutions:

Solution 1: Incorporate Line-Breaking Characters

Manually add spaces or other line-breaking characters. However, minifiers might remove these.

<div>
  <ul>
    <li>PHP </li>
    <li>JavaScript </li>
    <li>Rust </li>
    <li>Objective-C </li>
  </ul>
</div>

Solution 2: Utilize Pseudo-elements

Add line-breaking characters using CSS ::before and ::after pseudo-elements. Minifiers won't remove this CSS-added whitespace. Note that whitespace collapsing can affect this approach. Using white-space: pre; might be necessary.

Solution 3: Employ inline-block

Using display: inline-block; on list items forces breaks, similar to zero-width spaces, but without visual separation.

Solution 4: Leverage Flexbox

Using display: flex; or display: inline-flex; on the <ul></ul> allows for flexible line wrapping.

While this issue is less common, being aware of it and its solutions is valuable, especially when using minifiers or build processes that modify whitespace. Many modern tools mitigate this problem, but understanding the underlying cause remains important.

The above is the detailed content of When a Line Doesn't Break. For more information, please follow other related articles on the PHP Chinese website!