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

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

See also:

  • quirksmode: <wbr> compat list

The elements <wbr> and &nbsp; 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.