In HTML, is it possible to insert a word wrapping hint?
Use ­
in words or <wbr>
between words, as <wbr>
won't introduce a hyphen.
See also:
- quirksmode:
<wbr>
compat list
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;
}
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.