0

我正在使用hyphensCSS 的属性：https ://developer.mozilla.org/en-US/docs/Web/CSS/hyphens Mozillas 文档说：

建议的换行机会，如建议换行机会中所述，应优先于尽可能自动选择断点。

我认为这意味着浏览器会根据需要放置连字符，除非有类似­. 如果是这种情况，­将优先考虑。

但我有这个代码：

.box {
  width: 130px;
  border: 1px solid red;
  margin-bottom: 5px;
}
.box > a {
  text-transform: uppercase;
  font-size: 12px;

  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
<div class="box">
  <a href="" lang="en">subdermat&shy;oglyphic</a>
</div>
<div class="box">
  <a href="" lang="en">subdermatoglyphic</a>
</div>

现在我假设这个词在“subdermat”之后中断。但事实并非如此。它在“subdermato”之后破裂。至少在 Firefox 33 中。这个结果在其他浏览器中可能会有所不同。我知道这是“实验性技术”，但也许我遗漏了一些东西。我的实施有问题吗？

4

1 回答 1

1

从 HTML 和 CSS 的角度来看，您的代码没有任何问题。（首选）连字符是否正确当然是另一个问题。

但是 Firefox 并没有真正实现 MDN 页面描述的逻辑。该页面只是与旧版本的 CSS3 文本草案相呼应。当前编辑的草稿使事情变得更加强大（而且相当可疑），因为（默认值）：“如果单词包含条件连字符（或 U+00AD），hyphens: auto则必须忽略单词中的自动断字机会，以支持条件&shy;连字符。但是，如果即使在这样的机会中断之后，该单词的一部分仍然太长而无法放在一行中，则可以使用自动断字机会。”</p>

Firefox 实际所做的，就我们可以从它的行为判断而言，它把它视为&shy;暗示一个断字机会，等于它根据其断字算法确定的机会，如果使用的话（这取决于声明的语言和在浏览器中安装了对各种语言的支持）。

这意味着当与自动断字一起使用时，&shy;（当前）在建议首选断字点（即比可能已由浏览器的断字符确定的其他点更受欢迎的点）方面没有用处。但是，它对于建议原本不会使用的断字点很有用。

如果你真的想让“subdermatoglyphic”连字，以便在“t”和“o”之间可以连字，但不能在“o”和“g”之间（大多数权威允许连字），你可以写<a href="" lang="en">subdermat&shy;<span style="white-space: nowrap">og</span>lyphic</a>。但这可能不值得。

于 2014-10-22T16:38:44.473 回答