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
  • 6,025
  • 8
  • 21
  • 41
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
  • 9,013
  • 5
  • 30
  • 31
0

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

span {
  white-space: nowrap;
}
<span>myfatherwasaself-taughtaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa....aaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184