Как сделать разрыв слова с помощью дефиса с помощью CSS

Question

Когда я пытался сделать разрыв строки, используя word-break, чтобы все выровнялось хорошо с каждой стороны, как показано ниже, или this demo, он не смог отобразить перенос.

Моя первая попытка была в Chrome, затем я направился в caniuse и нашел, что hyphens не может быть использован в Chrome. Но после этого я все еще не могу сделать это в Firefox. Есть ли что-то неправильное?

p { 
 
    width: 200px; 
 
    background: lightgray; 
 
    word-break: break-all; 
 
} 
 

 
.p1 { 
 
    hyphens: auto; 
 
}

<p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh metus, aliquam sed diam nec, rutrum vestibulum justo. Nulla enim ipsum, placerat vitae diam at, semper mollis quam. In hac habitasse platea dictumst. Donec faucibus, urna porta efficitur interdum, nunc leo rutrum risus, at mattis sapien magna vitae nisl. </p> 
 
    <p class="p2">Mauris tempor eget mi aliquet sagittis. Curabitur ultricies nisi a massa sagittis ullamcorper. Etiam sagittis facilisis tortor, quis porttitor lacus porttitor eu. Duis lacinia purus odio, nec mollis ex convallis sit amet. Aenean leo erat, porta sit amet ultricies in, volutpat nec leo. Aliquam ut mauris quis diam commodo laoreet vitae mattis velit. Suspendisse vehicula ipsum ac ligula euismod faucibus.</p>

Answer 1

Ваш подход прекрасно, но поддерживается только с дефисом в Firefox, IE10 +, прошивкой 4.2+ и Safari 5.1 +, так как переносы словари включены только в тех.

Чтобы максимизировать вашу поддержку, вы должны иметь следующие в вашем CSS:

-webkit-hyphens: auto; 
-moz-hyphens: auto; 
-ms-hyphens: auto; 
hyphens: auto;