CSS Chrome 中较长单词的断字问题

Question

我正在尝试使用 CSS 连字符来连接长单词，例如 in this example

如您所见，最后一个字母落在新行上。这发生在 Chrome 中，而不是在 Safari 中。由于我的布局使用了一定宽度的块，我想将单词放入块中，解决方案不是更改字体大小或块宽度，而是解决连字符问题。

p {
  width: 105px;
  border: 1px solid black;
  text-align: center;
}

p.hyphenate {
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  word-wrap: break-word;
}

<p class="hyphenate">ANONYMOUSLY</p>
<p class="hyphenate">EXEMPLARITY</p>
<p class="hyphenate">THAT EXEMPLARITY</p>

在最后一段中 "Y" 放在新行上，没有任何连字符。

这里是CodePen例子。在 Safari 中工作正常，在 Chrome:

中不工作

https://codepen.io/jospo/pen/MWWjzLe

感谢您的任何建议。

Answer 1

hyphens 目前只是一个 工作草案 CSS 属性目前还没有被所有浏览器完全实现或支持。

我建议您查看 CanIUse.com 中的支持表，其中包含以下注释。

Chrome < 55 and Android 4.0 Browser support "-webkit-hyphens: none", but not the "auto" property. It is advisable to set the @lang attribute on the HTML element to enable hyphenation support and improve accessibility.

For Chrome: Only supported on Android & Mac platforms (and only the "auto" value) for now.

CSS Chrome 中较长单词的断字问题

CSS hyphenate issues with longer words in Chrome

html

css

hyphenation

css-hyphens