Stack Overflow
Stack Overflow

Questions tagged [css-hyphens]

The hyphens CSS property tells the browser how to go about splitting words to improve the layout of text when line-wrapping.

This is still in an experimental stage

The hyphens CSS property tells the browser how to go about splitting words to improve the layout of text when line-wrapping. On HTML, the language is determined by the lang attribute: browsers will hyphenate only if this attribute is present and if an appropriate hyphenation dictionary is available. On XML, the xml:lang attribute must be used.

Source

35 questions
43
votes
3 answers

How can I use hyphenation in Google Chrome browser?

I use the following css to auto hyphen text in my website: -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; But in chrome this has no effect. I already read, that chrome doesn't support this. Is there any workaround for…
cypher75
  • 2,099
  • 4
  • 18
  • 18
27
votes
3 answers

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:
BERUFSBILDUNGSZENTRUM
.content { max-height:…
Lee
  • 1,041
  • 7
  • 20
  • 31
7
votes
4 answers

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; …
L84
  • 45,514
  • 58
  • 177
  • 257
5
votes
3 answers

Why hyphens don't work with inner ?

I'm trying to get hyphens working on text that has elements inside for highlighting. This seems to break the hyphen algorithm. Is there any way to fix the behaviour so that hyphens are placed the same as without elements? I'm not…
tobias47n9e
  • 2,233
  • 3
  • 28
  • 54
4
votes
1 answer

Microsoft Edge bug using hyphenation and flexbox

This code shows two div containers. On the div with the id a is display: flex; set. On both we have hyphenation activated using -ms-hyphens: auto;. But in IE or Edge the hyphenation only works on the div without the flexbox attached. As expected it…
Kevin Bieri
  • 143
  • 8
3
votes
1 answer

How to hyphenate a capital word with CSS?

I have one word I need to hyphenate, however in lang=en hyphenate: auto does not work on capital words. So in js I used the slice function to slice the word in half so the second half that needs hyphenating no longer counts as a capital…
ggggg
  • 39
  • 1
  • 3
2
votes
0 answers

Css hyphens missing for some text

In this code, hyphens don't seem to work properly: .container { width: 100px; background: olive; overflow-wrap: break-word; hyphens: auto; margin-bottom: 10px; padding: 0px 15px; box-sizing: border-box; }
Michal Kurz
  • 1,592
  • 13
  • 41
2
votes
4 answers

The same code looks differently when I open it from a local file and from Codepen. Why does that happen?

Here is a pen by Chris Coyier, referred in his article Handling Long Words and URLs: https://codepen.io/team/css-tricks/pen/RWaNxr.