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

Krystian Cybulski picture Krystian Cybulski · Apr 19, 2012 · Viewed 10k times · Source

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

Zeta picture Zeta · Apr 19, 2012

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

See also: