CODEWITHSUNDEEP
cssword-wrapword-break
Pass
Pass

Reputation: 11

Word break Chrome issue

I have a word that contains "-" in it (pre-balancing) that I don't wont to be separate in two lines.

In Google chrome The word is divided in two lines:

something something something pre-
balancing

and I want it to be:

something something something pre-balancing

or:

something something something
pre-balancing

For other words which don't have "-" works fine. I have this issue only for chrome browser. In all the other browser that I've tested seems to be working fine.

Can anyone help me out with this one?

Upvotes: 1

Views: 966

Answers (2)

Lieutenant Dan
Lieutenant Dan

Reputation: 8264

Wrap a <span> tag around your long word that contains hyphen. And apply CSS as below.

<p>something <span class="nowrap">pre-balancing<span> something something something</p>

.nowrap {
    white-space: nowrap;
}

Or use the non breaking hyphens within HTML: &#x2011; or &#8209; (Although I prefer CSS)

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 114979

Use a non-breaking hyphen &#8209; html entity instead.

Upvotes: 4

Related Questions