CSS break a hyphen word

Question

I want to break a long hyphen at the end of the first line.

Expected:

BERUFSBILDUNGSZENT- RUM 

Gets the following:

 BERUFSBILDUNGSZENT RUM 

Here are my html and css:

 <div class="content">BERUFSBILDUNGSZENTRUM</div> .content { max-height: 80px; width: 200px; overflow-x: hidden; word-wrap: break-word; padding: 10px; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; font-weight: bold; font-size: 16px; border: solid 1px #000; } 

You can check my jsfiddle

Answer 1

Chrome does not explicitly migrate (at least on Windows). You can travel better with other browsers or platforms. You can use ­ (soft hyphen) if you know in advance where you want to break. Otherwise, at least in Chrome on Windows there is no way to get a hyphen when CSS breaks a long word, unless it was at the beginning of the input.

 .content { max-height: 80px; width: 200px; overflow-x: hidden; word-wrap: break-word; padding: 10px; font-weight: bold; font-size: 16px; border: solid 1px #000; } 

 Using soft hyphen: <div class="content">BERUFSBILDUNGSZEN&shy;TRUM</div> Using automatic hyphenation (doesn't work in Chrome) <div class="content" lang="de" style="hyphens: auto; ">BERUFSBILDUNGSZENTRUM</div> Soft hyphen not displayed if it doesn't break there <div class="content" style="width: 400px; ">BERUFSBILDUNGSZEN&shy;TRUM</div> 

See also this answer .

Answer 2

Add the lang="de" attribute to your HTML tag as the browser solves this using an algorithm that is defined in that language.