0

A long words with '-' may be wrapped in HTML source code in chrome. For example, I have a long word myfatherwasaself-taughtaaaaaaaaaaaaaaaaaaaa....aaaaaaa.

In Chrome, the word will break at '-' in both source code and rendered html, but in Edge, the word is displayed correctly. This figure may be more clear.

Contrast Figure:

enter image description here

My Chrome version is 54.0.2840.59 and Edge version is 38.14393.0.0. Can somebody tell me why Chrome wrap word when encounter a '-'? Does Chrome process the '-' particularly?

Minal Chauhan
  • 5,982
  • 8
  • 20
  • 39
Acceyuriko
  • 1
  • 1
  • Possible duplicate of [No line-break after a hyphen](http://stackoverflow.com/questions/7691569/no-line-break-after-a-hyphen) – V Maharajh Oct 21 '16 at 05:05
  • 1
    What defines "displayed correctly"? Specs probably don't say anything of this case so there is no "correctly", only "how I'd like to" – Sami Kuhmonen Oct 21 '16 at 05:09

2 Answers2

0

You need to use a non-breaking hypen: ‑

Similar concept to a non-breaking space:  

V Maharajh
  • 7,518
  • 5
  • 25
  • 29
0

Or give the element a white-space: nowrap; CSS property.

span {
  white-space: nowrap;
}
<span>myfatherwasaself-taughtaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa....aaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
Brett DeWoody
  • 55,478
  • 28
  • 131
  • 182