zero-width space after hyphen

[Jerry]

I am trying to have a hyphen, e.g. Mon-Tues, break at the end of a line in firefox using CSS, without success.

.couponwp p 02D:after {
content: "\200B";
}

Of note, the CSS below works fine:

`.couponwp p {
font-size: 12px;
}’

Thank you for your time
Jerry

Sorry about the confusion, the forum will no accept the complete code for hyphen:after
Jerry

[Paulie_D]

A demo in Codepen might be of more help.

Is this an issue only in Firefox or other browsers too.

[Jerry]

Thank you for responding,

Posting on this forum is the first time I heard of codepen, I will learn how to use it.

Only a firefox issue. Fire fox will not break a hyphen at the end of a line if there is four or less characters before or after the hyphen.

Jerry

[DanielNichesite3]

Really strange. Different browse always make the different bug to developer. I often has these kind of error with IE8.

[Jerry]

When I use word-break: break-all in firefox words break like this:

some-thin
g

or

somethi
ng

When I use word-break: normal nothing happens.

Instead of trying to add the zero-width-space after the hyphen in firefox, is there a way using CSS to replace the hyphen with one that would respond to word-break: normal

Thank you for your time

Jerry

[Paulie_D]

I’m still a little confused…why would you have a ‘non-word’ like “some-thing”.

And why would you break “Mon-Tues”?

Are you trying to break actual hyphenated words or prevent hyphenated words from breaking.

There is an HTML entity for a non-breaking hyphen.

‑

[Jerry]

some-thing was just used as a test.

I am trying to break actual hyphenated words e.g “Mon-Tues” Putting a class or code at the location of each hyphenated word e.g. “Mon-Tues”, “10:00am-11:30pm” ect… is not an option for this situation.

Thank you for responding.

Jerry

[Jerry]

Thank you for responding,

Is it not possible to force a hyphen, e.g. Mon-Tues, to break at the end of a line in firefox using CSS ?

Jerry

[Jerry]

Thank you for your response. Maybe I can get the zero width space to work.

The hyphen breaks are for coupons with a narrow width.

There are a number of possibilities including word-wrap, overflow-wrap that I should probability look at again.

Thank you for your time

Jerry

[Jerry]

Thank you for that option. Your help has been appreciated.

Jerry

[Author]

Posts