CSS-Bindestriche funktionieren nicht in FireFox (52)

Question

Ich habe mehrere Fragen und Foren durchgesehen und konnte keine Antwort finden. Ich sah this post, aber es ist Lösung für mich nicht funktioniert.

Ich kann bestätigen, dass dieses Problem für mich auf beiden Windows und Mac Firefox passiert.

div { 
 
    width: 200px; 
 
    padding: 0 15px; 
 
    margin: 0 auto; 
 
} 
 
p { 
 
    font-size: 16px; 
 
    -ms-word-break: break-all; 
 
    word-break: break-all; 
 
    -webkit-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
    hyphens: auto; 
 
}

<div> 
 
    <p lang="en">Better Life Expands Commitment to the Environment 
 
</div>

Für mich in Chrome ist bricht das Wort "Commitment" zu zwei Linien "Commitment" mit einem Bindestrich. Firefox schneidet das Wort in "Committee" und "nt", aber es wird kein Bindestrich eingegeben.

Ich habe alle Kleinbuchstaben versucht, verschiedene Größen, Einfügen ­ und Verwendung von Handbuch, aber nichts scheint zu funktionieren.

Jeder hat einen Rat oder vielleicht ein Wunder, das Sie verpasst haben x was verursacht Ihre Lösung? Danke im Voraus.

Answer 1

löschen Sie einfach die word-break: break-all; - hier funktioniert in Firefox:

div { 
 
    width: 200px; 
 
    padding: 0 15px; 
 
    margin: 0 auto; 
 
} 
 

 
p { 
 
    font-size: 16px; 
 
    -webkit-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
    hyphens: auto; 
 
}

<div> 
 
    <p lang="en">Better Life Expands Commitment to the Environment 
 
</div>

Hier ist ein Screenshot des Ergebnisses (Firefox Mac):