Search code examples
cssfirefoxword-wrapcss-hyphens

FireFox word breaks OK with css, but one letter at a time, not where hyphens go

FireFox word breaks OK with css, but one letter at a time, not where hyphens are supposed to be???

NOT FireFox:

Not Firefox word break

FireFox:

FireFox word break

Here's the CSS:

.superLongStuff {   
    /*
        SUPER LOOOOOOOOOOOONG WORD STUFF ...
    */
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap:     break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break:     break-all;
    /* Instead use this non-standard one: */
    word-break:     break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens:     auto;
    -moz-hyphens:    auto;
    -webkit-hyphens: auto;
    hyphens:         auto;  
}
Solution

  • a) Don't use word-break when you want to use hyphenation. It will simply always break the words.

    b) To be on the safe side, add a language attribute to the container (can be html, body, or also the containing div, like <div class="a" lang="en"> - see below.

    .a {
  width: 240px;
  border: 1px solid #eee;
}

.x {
 
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  
}
    <div class="a" lang="en">
  <p class="x">
    A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy,
    my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.
  </p>
</div>