css break word with hyphen

Question

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

So there's really no way to do that? I can't decide where to break the word cause it's data from user and they change it frequenly — Lee, Mar 09 '17 at 03:06

maku · Answer 1 · 2023-01-26T11:22:45.130

24

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

edited Jan 26 '23 at 11:22

answered Mar 28 '22 at 13:48

maku

249
4
4

what is so "2022" about this? and why did you link to a *jsfiddle* instead of adding a runnable code right here? The exact same answer has been provided here 5 years before. – vsync May 10 '22 at 21:20
Also, specifically setting `lang="de"` might have undesired effects for content which is in other languages and needs browser translation or what not, since you are setting an incorrect `lang` (most likely) – vsync May 10 '22 at 21:23
2

@vsync The "2022" is a bit unnecessary, that's true. The `lang="de"` attribute is only added to the element with the content of "Berufsbildungszentrum", which is a german word. Also my solution differs a bit from the ones provided before, since it is working in Chrome too and doesn't utilize ``. Simply adding `lang="de"` as stated in the other answer does not work in this case. – maku May 11 '22 at 15:35
The other one also works in Chrome. it's the same, and also doesn't use ``. your solution is **completely identical**. – vsync May 11 '22 at 17:10
@vsync Sorry, my mistake on that one, the automatic hyphenation does work in Chrome, but not in Firefox, you can try it out yourself. – maku May 11 '22 at 17:22
Why does this only work with de? Not en or en-GB. (Tested in Chrome) – egmfrs Nov 10 '22 at 11:52
1

@egmfrs: Because it's a German word. You can try with other languages and the lang tag set accordingly, it should work in most cases, however depending on the browser support. See compatibility table here: https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens maku: You might want to add this in the answer itself. – Zaphoid Jan 23 '23 at 22:39
Thanks for the comment @Zaphoid, added that to the answer. – maku Jan 26 '23 at 11:24
@Zaphoid not really for me. See pedrotester's comment on the accepted answer. The word I was trying was "precautionary" (I'm guessing that's not German). – egmfrs Jan 31 '23 at 13:56

score 21 · Accepted Answer · edited May 23 '17 at 12:03

21

Chrome does not do hyphenation apparently (at least on Windows). You may fare 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'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.

edited May 23 '17 at 12:03

Community

1
1

answered Mar 09 '17 at 03:14

Yes it works on Firefox but doesn't work on Chrome. Thank you – Lee Mar 09 '17 at 03:27
It may be worth looking into a JS library to get this functionality in your pages. One that comes to mind is http://mnater.github.io/Hyphenator/, it can be used both simply or in-depth. Definitely look into using this since there is no pure CSS solution at this time. – pattyd Mar 09 '17 at 03:30
5

It's worth noting that the example works in Firefox only when the `lang` attribute is present. Most examples tend to overlook that, but it's vital. – Mr Lister May 19 '17 at 07:06
4

it doesn't work for me with lang="en", only works with "de" lol while my text is in english – pedrotester Oct 02 '20 at 22:05

score -1 · Answer 3 · edited Mar 09 '17 at 06:57

-1

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.

edited Mar 09 '17 at 06:57

Hakan Fıstık

16,800
14
110
131

answered Mar 09 '17 at 03:16

evayly

832
7
18

6

You clearly didn't test this answer in the fiddle, adding a language set does not fix this specific issue. Also, your "answer" would be better suited as a suggestion in the comments to see if it leads towards the OPs solution or the next step in a solution. – pattyd Mar 09 '17 at 03:22
This may or may not be a part of the solution. It may be necessary in some browsers which support automatic hyphenation. On the other hand, it may not be necessary in other browsers. It won't make any difference if the browser does not support hyphenation to begin with. – Mar 09 '17 at 05:35
Should be understand the question. Then update your answer for relevant question. @evayly – Bipon Biswas Mar 09 '17 at 06:24

css break word with hyphen

3 Answers3

Linked

Related