Specifying a preferred line break point in HTML text in a responsive design

I was wondering if there is a CSS or javascript magic that could place a marker in an html text so that the browser know where the line break creation is preffered when the text gets cramped. Is there such thing?

I think this works very well:

span.line {
  display: inline-block;
}

<p>
  <span class="line">This text should break</span>
  <span class="line">after the word "break"</span>
</p>

The text still breaks on other places when there is not enough space:

open demo

Is the <wbr> tag (word break) what you are looking for?

It's not CSS or JS, but can be placed directly in the HTML

Unfortunately, there is no way in HTML or CSS to express that some allowed line break point is more preferable than some other. If there were, we could expect to find it in the CSS3 Text module, but its current draft has nothing like that – just ways to control how allowed line break points are determined.

What you can do is to disallow line breaks where they would normally be allowed. Typically, a space implies a line breaking opportunity, but using a no-break space (which can be written as   if desired) you forbid that.

For example, if you have a heading text like “A bridge across the Irish Sea and four other amazing plans”, then you might say that there is the best line breaking opportunity is after “and”, a good opportunity after “across”, and a rather bad (though permissible) after “Irish”, and so on. But you can’t do that in HTML or CSS, and typically not in typesetting programs either. You can just allow or disallow breaks, e.g. as in <h1>A&nbsp;bridge across the&nbsp;Irish&nbsp;Sea and four&nbsp;other amazing&nbsp;plans</h1>. For headings and headlines, this might make sense, even though it means that you consider each space and decide whether to make it non-breaking.

You can put text into spans and prevent line breaks inside them. This way line breaks could only happen between two spans:

<span style="white-space:nowrap">I won't break.</span> 
<!-- this is a breaking point --> 
<span style="white-space:nowrap">I won't break either.</span>

I definitely understand why you want this, and there have certainly been times that I have looked at a layout and at first thought, wanted the same thing.

But I wouldn't be doing due justice if I didn't mention that doing this can cause some major word flow issues.

Do you have a responsive website? If so, just changing the size of the viewport on your browser can turn a nice looking line of word broken text into something that looks terrible.

And even if you don't have a responsive website, and are using pixel-perfect design, all someone needs to do is change the size of the font and everything will go crazy.

I would rethink this decision. Just my opinion, though.