90

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?

Forethinker
  • 3,548
  • 4
  • 27
  • 48
  • 1
    The title of the question asks for a *potential* line break point, whereas the text asks for *priority* of breaking line, which seems to mean a *preferred* line break point (among line break points in some text). Two rather different, though related, questions. – Jukka K. Korpela Aug 14 '13 at 13:35
  • 2
    +1 for your question though because I think the way you have worded it better specifies the issue. – Luke May 14 '14 at 11:26
  • `

    Sample Test one Sample Text two

    `     – 151291 Dec 17 '16 at 12:30
  • 1
    A related feature is the hypenation hint, unicode U+00AD SOFT HYPHEN or ­ in HTML. This acts as a hint to the browser of suggested use of a hyphenation in a long word when doing line wrapping. Not an answer, but thought I'd mentioned it as it might be helpful for some readers drawn to this question. – James World Feb 13 '21 at 21:05

5 Answers5

154

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:

screenshot

open demo

jomo
  • 14,121
  • 4
  • 29
  • 30
  • 2
    perfect. much better than the original answer cuz it doesnt break at super small screen sizes – oldboy May 25 '19 at 05:53
  • 1
    this works well on big screens but for small screens dynamic font sizing kicks in everywhere *except* these display:inline-block parts so it looks tiny – Alec Jacobson Sep 10 '20 at 16:38
54

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

fregante
  • 29,050
  • 14
  • 119
  • 159
n_ermosh
  • 611
  • 4
  • 9
  • 1
    +1 but the IE struck ! – Krish Aug 14 '13 at 02:58
  • 5
    It does not do exactly what I am I looking for. `` preemptively makes the line break within a word, I am looking for a solution that will make line breaks between words. – Forethinker Aug 14 '13 at 03:22
  • 3
    although it is called word break, all it does is tell the browser where to place a break if it needs to, rather than just defaulting to the last word that fits. – n_ermosh Aug 14 '13 at 13:15
  • 1
    It is indeed the simplest/best solution IMO. Vote that up! – FlorianB Jun 26 '16 at 16:50
  • 32
    `` merely gives the browser another place to insert a line-break if necessary. It doesn't cause that place to be preferred over other such places. For example, if the content contains spaces, the browser might choose to insert a line break at one of those rather than at the ``. – Michael Dyck Nov 07 '16 at 15:50
  • 1
    also i think thats intended for actual words, not groups of words. hence the name of it – oldboy May 25 '19 at 05:44
  • 1
    however, sometimes using `` with the CSS `white-space: nowrap;` rule is also useful when you want to have total control over breaks eg. in big headings on banners etc. – maxjvh Nov 04 '20 at 09:16
18

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 &nbsp; 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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
17

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>
Szili
  • 263
  • 2
  • 7
-6

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.

MikesBarto2002
  • 181
  • 3
  • 15