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 +，iOS 4.2+和Safari 5.1+中的连字符，因为连字词仅包含在那些连字符中。

为了最大限度地提高您的支持度，您应该在CSS中拥有以下内容：

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

如何使用CSS使用连字符进行单词分解

1 个答案: