Is there cross browser word-wrap: overflow-wrap solution?

Question

I'm trying to achieve the following effect:

But it seems like the only way to do this is with word-wrap: overflow-wrap which isn't widely supported.

So instead the only solution I seem to have is to use: word-break: break-all which will produce the following results:

NOTICE: how the from is broken in the second picture? What styles do I need to use to get the results from the first image?

JSFiddle: https://jsfiddle.net/jennifergoncalves/k4yn9ucf/

Answer 1

word-wrap (documentation) is a legacy name for overflow-wrap. word-wrap is required for IE (11), Edge, and Opera Mini. Other major browsers now all support overflow-wrap (source). This property can be set to:

• normal - breaks only between words
• break-word - may break words in the middle if necessary

In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

There is another property called word-break (documentation) which control how words are broken. Accepted values:

• normal - default
• break-all - break between any two characters of a word
• keep-all - identical to normal for non-CJK (Chinese/Japanese/Korean) text

In contrast to overflow-wrap, word-break will create a break at the exact place where text would otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break).

So it would seem there are two options to get properly wrapped text:

• overflow-wrap: break-word
• word-break: break-all

Here's a comparison of the two, along with a no-wrapping example:

p {
  background-color: #009AC7;
  color: #FFFFFF;
  font-size: 18px;
  font-family: sans-serif;
  padding: 10px;
  text-align: justify;
  width: 250px;
}

.wrap1 {
  overflow-wrap: break-word;
}

.wrap2 {
  word-break: break-all;
}

No wrapping:
<p><b>pneumonoultramicroscopicsilicovolcanoconiosis</b> refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano;</p>

<code>word-wrap: normal</code> and <code>word-break: normal</code>
<p class="wrap1"><b>pneumonoultramicroscopicsilicovolcanoconiosis</b> refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano;</p>

<code>word-wrap: normal</code> and <code>word-break: break-all</code>
<p class="wrap2"><b>pneumonoultramicroscopicsilicovolcanoconiosis</b> refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano;</p>

Can you see the problem? If you are using the latest Chrome, for example, the word breaks are placed at arbitrary points. There is nothing preventing your browser from breaking from into f-rom because it would need to understand the hyphenation rules for the particular language.

Fortunately, there is hyphens (documentation) which should solve your problem. The value auto should allow the browser to decide when to hyphenate.

Hyphenation rules are language-specific. In HTML, the language is determined by the lang attribute, and browsers will hyphenate only if this attribute is present and if an appropriate hyphenation dictionary is available. In XML, the xml:lang attribute must be used.

Note: The rules defining how hyphenation is performed are not explicitly defined by the specification, so the exact hyphenation may vary from browser to browser.

Let's see it in action:

p {
  background-color: #009AC7;
  color: #FFFFFF;
  font-size: 18px;
  font-family: sans-serif;
  hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  padding: 10px;
  text-align: justify;
  width: 250px;
}

<code>hyphens: auto</code>
<p lang="en-US"><b>pneumonoultramicroscopicsilicovolcanoconiosis</b> refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano;</p>

In the latest Chrome on Mac this produced a nice result (although the gaps in the text are not very pleasant to look at), conforming to the English hyphenation rules.

Unfortunately, support for this property is a little spotty. Chrome supports this only on Mac and Android. Safari, IE, and Edge require vendor prefixes (source). If this is good enough for you, use hyphens. If not, consider using an alternative solution, such as a JavaScript automatic hyphenator, e.g. Hyphenator. Your last resort would be to use a hyphenation engine to parse your text and find all word-break points, then insert them into your as HTML soft hyphens – ­ – in combination with hyphens: manual.