Word break Chrome issue

318
April 06, 2017, at 9:29 PM

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?

Answer 1

Use a non-breaking hyphen ‑ html entity instead.

Answer 2

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)

Rent Charter Buses Company
READ ALSO
Why does Flexibilty.js does not allow this Flexbox Test to run on IE9 Compatability

Why does Flexibilty.js does not allow this Flexbox Test to run on IE9 Compatability

So I am currently developing a web app that uses FlexboxThis works fine in IE10/11, Chrome, Firefox etc but I could not get it working in IE9 (Compatability mode in IE11) obviously because it does not support Flexbox

270
how to pass javascript variable to css

how to pass javascript variable to css

I am using scrollbar function in my div tag

415
CSS inheriting div width

CSS inheriting div width

I have essentially the following code:

339
php include file also include the style of this file

php include file also include the style of this file

i have a PHP codes in indexphp like this:

339