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

Question

Когда я пытался сделать разрыв строки с помощью word-break чтобы все выровнялись по сторонам, как показано ниже или в этой демонстрации, в ней не было видно переносов.

Моя первая попытка была в 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+, iOS 4.2+ и Safari 5.1+, поскольку словари переносов включены только в них.

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

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