2

When i have long word which is longer than my container i am using "word-break: break-all;". I was wondering is it possible to put dash(-) at the break point of the word?

This is the css that i am using for the text:

p{    
-ms-word-break: break-all;
 word-break: break-all;

-webkit-hyphens: auto;
-moz-hyphens: auto;
    hyphens: auto;
}

http://fiddle.jshell.net/L18c813r/1/

Иван Иванов
  • 90
  • 8
  • Your code is correct (bar missing some prefixed properties) but not all browsers, most notably Chrome, fully support hyphenation yet. You can check the browser support for `hyphens` [here](http://caniuse.com/#feat=css-hyphens) and for `word-break` [here](http://caniuse.com/#feat=word-break). – Shaggy May 22 '15 at 10:48
  • Star this chromium issue and comment on it if you like to use hyphens:auto crossbrowser: https://bugs.chromium.org/p/chromium/issues/detail?id=47083 – Hans Gustavson Mar 23 '16 at 16:43

2 Answers2

0

You need the full set:

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;

The issue is there isn't full browser support for them. Test in IE, Firefox, or Safari.

There's a javascript library you can use to remedy that though. It's called Hypenator. http://mnater.github.io/Hyphenator/

Aibrean
  • 6,297
  • 1
  • 22
  • 38
0

An alternative is to use ­ in the word where it could wrap.

For this method, you need to specify possible "to-long-words" and add the html-tag manually.

also see this Stackoverflow answer

Community
  • 1
  • 1
Wavemaster
  • 1,794
  • 16
  • 27