4

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 works well in Chrome and Firefox.

div {
  max-width: 100px;
  background: red;
  -ms-hyphens: auto;
  hyphens: auto;
  margin-bottom: 10px;
}
#a {
  display: flex;
}
<article>
  <div id="a" lang="en">
    Incomprehensibilities 
  </div>

  <div id="b" lang="en">
    Incomprehensibilities 
  </div>
</article>

https://codepen.io/anon/pen/jmGxJZ

Does anybody have a solution?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Kevin Bieri
  • 143
  • 8
  • Neither of your Codepen samples work on my Chrome 58-64bit/Windows 10 ... or Firefox – Asons May 05 '17 at 13:11
  • I guess your system is configured in english. Mine was in german. So I updated the pen using english words for hyphenation. It should work now. – Kevin Bieri May 05 '17 at 13:29
  • Still doesn't break line – Asons May 05 '17 at 13:31
  • Either way, using CSS Hyphens today looks like a bumpy road...and Flexbox not being a _real_ block element, you might want to reconsider. This article has some good points: https://css-tricks.com/almanac/properties/h/hyphenate/ – Asons May 05 '17 at 13:44
  • According to http://caniuse.com/#feat=css-hyphens is not working on Chrome Windows anyway. But on FF Windows it's working for me. On mac it's working on both Chrome and FF. Additionally I added the `lang` tag to make it work on FF. But it still breaks on Internet Explorer. – Kevin Bieri May 05 '17 at 13:54

1 Answers1

5

I finally found an answer.

According to https://css-tricks.com/almanac/properties/h/hyphenate/

The hyphens property controls hyphenation of text in block level elements.

They say explicitly block level elements. So I decided not to use flexbox because this is not really a block level element thank you @LGSon.

So to have the text both centered and hyphenated I used the approach from https://css-tricks.com/centering-css-complete-guide/ to vertically center a block level element. Additionally according to http://caniuse.com/#feat=css-hyphens Chrome on Windows is not supporting hyphenation anyway. So I used word-break: break-all; just for Chrome using a media query hack from here https://stackoverflow.com/a/13587388/4558231. Finally it's working for Chrome, FF and Safari on MAC OSX. Also for Edge and IE11 on Windows.

You can see my result on https://codepen.io/bierik/pen/mmBjqQ

Community
  • 1
  • 1
Kevin Bieri
  • 143
  • 8
  • you should use paragraphs(

    ) for block display of text. For internationalization you should add a lang /xml:lang attribute to the html tag also. For google translate to work on your page you need to add a content-language http-equivalent meta tag in the head block.     – Rob Parsons May 07 '17 at 22:17
  • @RobParsons - putting the test word in a

    doesn't do it. IE then still does not hyphenate it. And I assume Edge neither.     – Frank Conijn - Support Ukraine May 23 '19 at 08:28