In HTML, is it possible to insert a word wrapping hint?

Question

Imagine I have a long, multi-word line of text in a DIV:

Hello there, dear customer. Please have a look at our offer.

The DIV has a dynamic width. I want to word wrap the above text. Currently, the wrapping happens on a word boundary which maximizes the length of the first line:

|-DIV WIDTH------------------------------------|
Hello there, dear customer. Please have a look
at our offer.

I would prefer that the wrapping happen on the sentence boundary. However, if no wrapping is necessary, I would like the line to remain as one.

To illustrate my point, please look at the various DIV widths and how I would like my text to wrap:

|-DIV WIDTH--------------------------------------------------------|
Hello there, dear customer. Please have a look at our offer.
|-DIV WIDTH-----------------------------------|
Hello there, dear customer. 
Please have a look at our offer.
|-DIV WIDTH--------|
Hello there, dear 
customer. 
Please have a look
at our offer.

With words, you can use a soft hyphen so that the word wrapping happens on suggested syllable boundaries. If no wrapping is needed, the ­ remains invisible. If wrapping is needed, the ­ is where it happens:

magnifi­cently

Is there an analogous method for hinting word-wrapping in HTML?

Answer 1

Use ­ in words or <wbr> between words, as <wbr> won't introduce a hyphen.

See also:

• quirksmode: <wbr> compat list

Answer 2

Not quite exactly, but close: http://jsfiddle.net/uW4h8/1/.

In brief, you should set white-space: nowrap; for you text container and use <wbr> to insert breaks between words as desired.

Answer 3

The elements <wbr> and   often work, but not always. They are especially problematic when designing a static landing page that (a) has to work on a variety of screens and browsers and (b) has to look good.

In this case I want control over line-break hints at a variety of different screen resolutions. To do so, I use <br> tags and css. It can become a mess if it gets complex, but I found it works up to a point. For example:

<p class='break-hints'>
Hello there, dear customer. <br class='break-big'>
Please have a look <br class='break-small'> at our offer.
</p>

I then use CSS with media queries to indicate when the various breaks should be triggered.

p.break-hints br {
  display: none;
}

@media only screen and (max-width: 300px) { 
  p.break-hints br.break-small {
    display: inline;
  }
}

p.break-hints br.break-big {
  display: inline;
}

Answer 4

Use a no-break space U+00A0 (or   if you have no convenient way of entering the character as such) between words when a line break is not to be allowed, and normal space otherwise.

This won’t work when words contains hyphens “-”, and some other characters, such as parentheses, may cause problems as well, because some browsers treat them as allowing a line break after them. See http://www.cs.tut.fi/~jkorpela/html/nobr.html for a lengthy treatise, including various techniques of coping with the problems. But if you have normal words with normal punctuation only and no hyphens, you should be fine with the simple approach.