CODEWITHSUNDEEP
htmlcssword-wrapline-breaks
Merchako
Merchako

Reputation: 899

Prioritize optional line breaks in HTML/CSS

HTML5 has some great tools for controlling optional line breaks: line break opportunity <wbr>, non-breaking space &nbsp;, soft break &shy;, and zero-width space &#8203;. As far as I can tell, optional line breaks always occurs closest to where the line would overflow (on the right for left-to-right languages). But what if I'd prefer for optional breaks to start on the left?

Here's an example. Three ways of writing it take one line if there's room.

Noise. Signal→Exit            // A
Noise. Signal<wbr>→Exit       // B
Noise.<wbr> Signal<wbr>→Exit  // C

"Noise. Signal→Exit" on one line

If "Noise. Signal→Exit" breaks in one place, I want the break to happen after .. Approach A succeeds, where approaches B and C fail.

 With one break

If it breaks at two places, I want it to break at before →. Approach A fails, where B and C succeed.

With two breaks

Each option fails sometimes; I can't great the break behavior I want in all circumstances. But perhaps I’m missing something. How can I be more specific about when I where and when breaks to occur?

Upvotes: 2

Views: 1093

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42354

You can wrap the part of the text you want to stay together (including the <wbr>) in a <span> that sets display: inline-block.

Your code would be:
Noise.<wbr><span>Signal<wbr>→Exit</span>

As can be seen in the following:

.one {
  width: 150px;
}

.two {
  width: 100px;
}

.three {
  width: 50px;
}

span {
  display: inline-block;
}
<div class="one">
  Noise.<wbr><span>Signal<wbr>→Exit</span>
</div>

<br />

<div class="two">
  Noise.<wbr><span>Signal<wbr>→Exit</span>
</div>

<br />

<div class="three">
  Noise.<wbr><span>Signal<wbr>→Exit</span>
</div>

Upvotes: 2

Related Questions