Is there cross browser browser hyphenation: overflow?

Question

I am trying to achieve the following effect:

But it seems that the only way to do this is with word-wrap: overflow-wrap , which is not widely supported.

So instead, the only solution that I think is to use: word-break: break-all , which will give the following results:

NOTICE: how about a violation in the second image? What styles should be used to get results from the first image?

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

Answer 1

word-wrap ( documentation ) is an obsolete name for overflow-wrap . word-wrap is required for IE (11), Edge, and Opera Mini. Other major browsers now support overflow-wrap ( source ). This property can be set like this:

• normal - breaks between words
• break-word - can break words in the middle, if necessary

Unlike word-break , overflow-wrap will only create a gap if the whole word cannot be placed on its own line without overflow.

There is another property called word-break ( documentation ) that control the violation of words. Accepted Values:

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

Unlike overflow-wrap , word-break will create a break in the exact place where the text would otherwise overflow its container (even if you put the whole word in its line, it will deny the need for a break).

Thus, it would seem that there are two options for obtaining correctly wrapped text:

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

Here's a comparison of the two, along with an example without packaging:

 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> 

Do you see the problem? For example, if you use the latest Chrome, word breaks are placed at random points. There is nothing that would prevent your browser from breaking from to f-rom , because it would need to understand the transfer rules for a particular language.

Fortunately, there is hyphens ( documentation ) that should solve your problem. The auto value should let the browser decide when to port.

Hyphenation rules are language dependent. In HTML, the language is defined by the lang attribute, and browsers are only migrated if this attribute is present, and if a suitable dictionary for hyphenation is available. XML must use the xml:lang attribute.

Note. The rules governing how the transfer is performed are not explicitly specified by the specification, so the exact transfer may vary from browser to browser.

Look at him 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 last Chrome on Mac, this yielded a good result (although spaces in the text are not very pleasant to view), in accordance with the English transfer rules.

Unfortunately, support for this property is a bit spotty. Chrome only supports this on Mac and Android. Safari, IE, and Edge require vendor prefixes ( source ). If this is enough for you, use hyphens . If not, consider an alternative solution, such as an automatic JavaScript deficer, for example. Hyphenator In the latter case, you should use the hyphenation mechanism to parse the text and find all break points of the word, and then embed them in your HTML HTML hyphens - ­ - in combination with hyphens: manual .