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

Question

I was wondering if there is CSS or javascript magic that can put marker in html text so that the browser knows where the line break is created when the text gets cramped. Is there such a thing?

Answer 1

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 in other places when there is not enough space:

open demo

Answer 2

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

This is not CSS or JS, but can be placed directly in HTML

Answer 3

Unfortunately, there is no way in HTML or CSS to express that some valid line break point is preferable to any other. If that were the case, we could find it in the CSS3 Text module, but its current project has nothing of the kind - only ways to control how valid line break points are defined.

What you can do is to prevent line breaks where they will usually be allowed. As a rule, space implies the possibility of line breaks, but using a space without a space (which can be written as   if necessary), you forbid this.

For example, if you have a heading, for example, “Bridge over the Irish Sea and four other amazing plans,” then you can say that there is a better possibility of breaking the line after “and”, a good opportunity after “through”, and rather bad (although permissible) after "Irish" and so on. But you cannot do this in HTML or CSS, and usually not in typing programs. You can simply enable or disable breaks, for example. as in <h1>A&nbsp;bridge across the&nbsp;Irish&nbsp;Sea and four&nbsp;other amazing&nbsp;plans</h1> . For headings and headings, this can make sense, even if it means that you look at each space and decide whether to make it inextricable.

Answer 4

You can put text in spaces and prevent line breaks inside them. Thus, line breaks can occur only between two intervals:

 <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> 

Answer 5

I definitely understand why you want this, and, of course, at times I looked at the layout and at first thought, I wanted the same thing.

But I won’t do justice if I didn’t mention that this can cause some serious problems with word flows.

Do you have a responsive website? If so, simply resizing the viewport in your browser can turn a beautiful-looking line of broken text into something terrible.

And even if you don’t have a responsive website and you use the perfect pixel, all you have to do is change the font size and everything will go crazy.

I would review this decision. Just my opinion.