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?
Use ­ in words or <wbr> between words, as <wbr> won't introduce a hyphen.
See also: