0

我正在尝试使用 CSS 连字符来连接长词，例如在 这个例子中

如您所见，最后一个字母落在新行上。这发生在 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

感谢您的任何建议。

4

1 回答 1

1

hyphens目前只是一个工作草案CSS 属性，目前并非所有浏览器都完全实现或支持。

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

Chrome < 55 和 Android 4.0 浏览器支持“-webkit-hyphens: none”，但不支持“auto”属性。建议在 HTML 元素上设置 @lang 属性以启用连字符支持并提高可访问性。

对于 Chrome：目前仅支持 Android 和 Mac 平台（并且仅支持“自动”值）。

于 2019-10-18T12:07:11.357 回答