Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use automatic CSS hyphens with `word-break: break-all`?

Tags:

css

word-break

I'm using word-break: break-all; and want to know how I can have the browser automatically insert the hyphens, as demonstrated in an MDN example.

div {
  width: 80px;
  height: 80px;
  display: block;
  overflow: hidden;
  border: 1px solid red;
  word-break: break-all;
  hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
}
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

Such that the text would look like this:

aaaaaaaa-
aaaaaaaa-
aaaaaaaa-
aaaaaaaa

I created a JSFiddle too.

This needs to work in IE9/IE10, but it'd be nice if it'd work in Firefox and Chrome as well.

like image 457
chovy Avatar asked Mar 07 '13 01:03

chovy


People also ask

How do you break words with a hyphen in CSS?

hyphens: manual Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities. There are two characters that suggest line break opportunity: U+2010 (HYPHEN): the “hard” hyphen character indicates a visible line break opportunity.

How do you break all words in CSS?

The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. word-break: break-all; It is used to break the words at any character to prevent overflow.

How do you add a hyphen in CSS?

In HTML, use &shy; to insert a soft hyphen. Note: When the HTML <wbr> element leads to a line break, no hyphen is added.

How do you break a word with a hyphen?

Use a hyphen at the end of a line to divide a word where there is not enough space for the whole word. Follow the rules for dividing words correctly. Divide a word between syllables. Never divide a one-syllable word.


3 Answers

The word-break property and hyphenation are two completely different things. The first one, originally intended for East Asian languages mainly, does bad things to languages like English: it arbitr arily cuts w ords at some poi nts without ind icating that a word has been broke n.

So you should decide whether you have an expression where a line break can be inserted by a browser at any point or whether you want hyphenation.

For hyphenation, the CSS code as such is OK, though many people would advice putting the standard property setting hyphens: auto last, after prefixed properties. But it requires that the language of the text be declared in HTML markup, using e.g. <div lang=en>. Moreover, browser support is still limited: IE 9 does not support such hyphenation, and the support in IE 10 covers a relatively small set of languages (including English of course).

For automatic hyphenation on IE 9, you would need to use either server-side programmed hyphenation or, simpler, client-side hyphenation with tools like Hyphenator.js.

like image 78
Jukka K. Korpela Avatar answered Oct 17 '22 03:10

Jukka K. Korpela


The -ms-hyphens property only works in IE10+. It's not possible in IE9 or below.

See the browser compatibility chart at the bottom of the reference link you provided.

It doesn't work in Chrome yet: WebKit Hyphenation

like image 13
Ben Lee Avatar answered Oct 17 '22 02:10

Ben Lee


Hyphens are inserted if the browser supports & language includes a hyphenation dictionary. But your

aaaaaaaaaaaaaaaaaa

isn't in a dictionary.

Therefore you have to insert soft hyphens &shy; to your satisfaction like in https://jsfiddle.net/LJYj3/5/

Here's more food for thought: https://stackoverflow.com/a/856322/1696030

like image 13
Volker E. Avatar answered Oct 17 '22 01:10

Volker E.