天道酬勤,学无止境

css-hyphens

CSS Hyphens Not Working in Firefox?

I am attempting to use CSS Hyphens. They work in IE 11 and Safari but does not work in Firefox properly and I am unsure why. Here is an example: .container{ width: 16.6667%; background:#ccc; } h3{ font-size: 0.95rem; font-weight: 600; -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } <div class="container"> <h3>DIAGNOSEVERFAHREN</h3> </div> When you run the snippet in Firefox the word DIAGNOSEVERFAHREN overflows the container and does not break. In Safari and IE it breaks like I expect. Why doesn't this work in Firefox? Edit As noted by Marat Tanalin's answer one

2021-06-14 13:09:06    分类:问答    css   firefox   hyphenation   css-hyphens

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

2021-04-11 05:03:11    分类:问答    css   css-hyphens