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&shy;cently

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

score 38 · Accepted Answer · answered Apr 19 '12 at 10:54

38

Use  in words or  between words, as  won't introduce a hyphen.

See also:

quirksmode:  compat list

answered Apr 19 '12 at 10:54

Zeta

103,620
13
194
236

I've noticed that Google webapps such as Gmail use `` even within words. – hippietrail Nov 22 '12 at 10:58

Alexander Pavlov · Answer 2 · 2012-04-19T11:06:10.503

11

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

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

edited Apr 19 '12 at 11:06

answered Apr 19 '12 at 10:54

Alexander Pavlov

31,598
5
67
93

1

+1: Please include a short summary of your code next time, since you provided also the `` as a possible solution. – Zeta Apr 19 '12 at 11:04

speedplane · Answer 3 · 2016-06-13T18:10:16.270

The elements  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   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;
}

score 3 · Answer 4 · answered Apr 19 '12 at 12:58

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.

score 0 · Answer 5 · answered Aug 10 '20 at 14:48

I just had the same issue. I had text like the following:

<div>Assistant Something / Anything Pabulum Nautical</div>

Where breaking it after the / character would really help readability.

In my case, I solved it by wrapping the desired "lower line-break priority" chunks with inline-block (now inline flow-root apparently) elements:

<div><span class="inline">Assistant Something</span> / <span class="inline">Anything Pabulum Nautical</span></div>

See snippet for results.

.d {
  margin: 1em;
}

#b span {
  display: inline-block;
}

<div class="d" id="a">Assistant Something / Anything Pabulum Nautical</div>

<div class="d" id="b"><span>Assistant Something</span> / <span>Anything Pabulum Nautical</span></div>

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

5 Answers5

Linked