2

当我试图通过使用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>

4

1 回答 1

0

您的方法很好，但它仅支持 Firefox、IE10+、iOS 4.2+ 和 Safari 5.1+ 中的连字符，因为连字符字典仅包含在其中。

为了最大化您的支持，您的 CSS 中应该包含以下内容：

-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
于 2015-09-16T03:10:56.333 回答