Question

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

建议的换行机会，如建议换行机会所述，应优先考虑自动选择断点。

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

但我有这段代码：

＆＃13;

.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;
}

＆＃13;

<div class="box">
  <a href="" lang="en">subdermat&shy;oglyphic</a>
</div>
<div class="box">
  <a href="" lang="en">subdermatoglyphic</a>
</div>

＆＃13;

现在我假设在＆＃34; subdermat＆＃34;之后单词中断了。但它并没有。它在'subdermato＆＃34;之后破裂。至少在Firefox 33中。此结果在其他浏览器中可能有所不同。我知道这是＆＃34;实验技术＆＃34;但也许我错过了一些东西。我的实施有问题吗？

Answer 1

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

但Firefox实际上并没有实现MDN页面描述的逻辑。该页面回应了CSS3 Text草案的old version。对于hyphens: auto（默认值），current editor’s draft使事情变得更强（而且相当可疑）：如果单词包含条件连字符，则必须忽略单词中的自动连字机会（{{1} }或U + 00AD），支持条件连字符。但是，如果即使在打破这样的机会之后，该单词的一部分仍然太长而无法放在一行上，则可以使用自动连字机会。“

根据我们的行为判断，Firefox实际上做的是，它将视为建议连字机会，等于它根据连字算法确定的机会，如果使用的话（这取决于声明的语言以及浏览器中对各种语言的安装支持）。

这意味着当与自动连字符一起使用时，在建议首选连字点时不会（当前）有用（即，优先于其他可能由浏览器的连字符）。但是，建议不会使用的连字符点非常有用。

如果你真的想要“subdermatoglyphic”连字符，以便在“t”和“o”之间可以连字，但不能在“o”和“g”之间连接（大多数权限允许连字），你可以写{{1 }}。但它可能不值得。

如何使用和CSS“连字符”属性在一起？

1 个答案: