CODEWITHSUNDEEP
csscss-hyphens
Lee
Lee

Reputation: 1171

css break word with hyphen

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

Expected:

BERUFSBILDUNGSZENT-
RUM

Got this:

BERUFSBILDUNGSZENT
RUM

Here's 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

Upvotes: 35

Views: 81441

Answers (5)

Andrey Shostik
Andrey Shostik

Reputation: 194

Just use Non-Breaking Hyphen from here https://www.compart.com/en/unicode/category/Pd

Upvotes: 2

Samoth
Samoth

Reputation: 1707

BERUFSBILDUNGSZENT\u00adRUM is the solution of your choice when you can't use HTML Entities, e.g. when needing soft hyphen behaviour within a AG Grid Column Header.

Upvotes: 0

maku
maku

Reputation: 356

Solution in 2022:

If you add the lang Attribute to your div and type out "Berufsbildungszentrum" cased normally, using hyphens: auto; does work as excpected. You can then uppercase the word again using text-transform: uppercase;.

Please note that the supported dictionaries for hyphenation differ from browser to browser. A compatibility table can be seen here.

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

Check also the updated JSFiddle

Upvotes: 35

evayly
evayly

Reputation: 850

Add the lang="de" Attribute to your HTML-Tag, as the browser is deciding this using an algorithm which is decided on that language Tag.

Upvotes: 0

user663031
user663031

Reputation:

Chrome does not do hyphenation apparently (at least on Windows). You may fare better with other browsers or platforms. You can use &shy; (soft hyphen) if you know in advance where you want to break. Otherwise, at least in Chrome on Windows there's no way to get a hyphen when CSS breaks a long word, unless it was in the input to start with.

.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.

Upvotes: 26

Related Questions