2

I need to add automatic hyphen on break word using css. I have use bellow css for add hyphen but it's not working

width: 150px; border: solid 1px black;
-ms-word-break:break-all;
word-break:break-all;
word-break:break-word;
-webkit-hyphens:auto;
-moz-hyphens:auto;
hyphens:auto;

I need to add hyphen for Mozilla Firefox 53.0.3 and Google chrome

Tester
  • 271
  • 1
  • 5
  • 16

4 Answers4

2

You can try softhyphen (­). Which will automatically show hyphens when you need them. But the downside is you have to add it in content. This is a better way than making the hyphen:auto work in all the browsers

Example: https://jsfiddle.net/karthick6891/bma7qr7v/

<p> Lorem ipsum dolor sit amet, consectetur adip&shy;iscing elit. Suspendisse ullamcorper metus in lorem dapibus pellentesque. Mauris maximus, diam non euismod tristique, sem sem scelerisque risus, eget cursus dolor turpis eget massa. Morbi congue non velit vel congue. Suspendisse sit amet sapien a nisi tempus pellentesque. Integer eleifend justo dignissim, mollis neque quis, maximus lorem. Vestibulum ut purus sed neque venenatis ullamcorper. Suspendisse potenti. Aenean lobortis commodo sem id varius. Nulla facilisi. Nulla varius sagittis magna ac accumsan. Nunc euismod aliquam erat, ut fringilla odio sodales vitae. Curabitur pellentesque erat ut risus aliquam, convallis vulputate ex vestibulum. Integer a volutpat ex </p>

Look for word 'adipiscing' in the first sentence

karthick
  • 11,998
  • 6
  • 56
  • 88
  • **@karthick** First of all thanks for giving answer and This is one of solution but i'm not able to add softhyphen ("&shy") after every character and also my data is not static – Tester May 19 '17 at 07:18
  • @test if the content is authored by you then you can add the hyphen in long words. But if its authored by someone else then you might have to use javascript. The reason why I am saying to use is in a real world scenario you may run into cases like 'L-orem' where the letters after hyphen will be in a second line and 'L' alone in first line, which will be odd. – karthick May 19 '17 at 16:56
1

As was mentioned in the other answers, Chrome doesn't cooperate very well. CanIUse says it only works in Chrome under Mac OS and Android. Whatever the reason.

In the other browsers, it works fine, at least if the conditions are right. One thing that hasn't been mentioned in the other answers is that it depends on the language!
So, make sure the language of your document (or your paragraph) is set to the language the hyphenatable words are going to be in.

.words {
  width: 150px; border: solid 1px black;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
<p class="words" lang="en-US"> <!-- See? -->
  In orbital mechanics, the Hohmann transfer orbit is an orbital maneuver
  using two engine impulses which, under standard assumptions, move a
  spacecraft between two coplanar circular orbits.
</p>
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
0

Try using hyphen with auto

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

an example can be found here. I think this doesn't work on Chrome

Syfer
  • 4,262
  • 3
  • 20
  • 37
0

may you should look into this

PS: it will not work in chrome in IE9 or below, works on IE10 or above. 

-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
  • **@Bhavik Bamania** Thanks for giving answer but it's not working for me – Tester May 19 '17 at 06:14
  • @test yeah it won't bcoz browsers doesn't support it yet alternatively you can use js but it's just a hell of implementing it –  May 19 '17 at 06:16
  • @BhavikBamania It works fine in most browsers, if the circumstances are right. Only Chrome is problematic. – Mr Lister May 19 '17 at 06:45