Prioritize optional line breaks in HTML/CSS

Question

HTML5 has some great tools for controlling optional line breaks: line break opportunity <wbr>, non-breaking space  , soft break ­, and zero-width space ​. 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

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



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

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?

Answer 1

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>