CODEWITHSUNDEEP
htmlcss
peace_love
peace_love

Reputation: 6451

How to do not break a word after the hyphen?

I am using css break-word:

<p style="word-wrap: break-word; ">blablablablablablablablablablablabla-blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</p>

and as you see, my word is breaking after the hyphen - :

blablablablablablablablablablablabla-blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla

But this is not what I want, I like to break the word only at the end of the line.

Upvotes: 0

Views: 145

Answers (3)

Paul
Paul

Reputation: 9022

There is actually a character called "non-breaking hyphen". If you are able to use that, it won't break at that character and you do not need a CSS work-around. The HTML notation of that special hyphen is &#8209;, you can use it just like any other special character, e.g. the ampersand "&" (&amp;) or the circular bullet point "•" (&bull;).

<p style="word-wrap: break-word;">blablablablablablablablablablablabla&#8209;blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</p>

Additional note: this is also helpful outside the internet, e.g. for usage in office software. In MS Word/Powerpoint you can enter a non-breaking hyphen by using one of the following shortcuts: Ctrl + Shift + - or Alt + 8 2 0 9 (hold the Alt key and enter all digits using the num block).

Upvotes: 4

Aaron
Aaron

Reputation: 10430

word-break will make your dreams come true.

<p style="word-break: break-all; ">blablablablablablablablablablablabla-blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</p>

Upvotes: 4

Leo the lion
Leo the lion

Reputation: 3065

If you want to break the word only at the end of the line then use 

word-break: break-all;

rather then break-word.. Hope this will help.

Demo here

Upvotes: 4

Related Questions