为什么连字符不能与内部 <span> 一起使用？

Question

我正在尝试让连字符处理<span>包含用于突出显示的元素的文本。这似乎打破了连字符算法。有什么办法可以修复这种行为，使连字符的位置与没有<span>元素的位置相同？我不是在问类似的解决方法­

代码（沙盒：https : //codepen.io/anon/pen/ayzxpM）：

.limit {
  max-width: 50px;
  hyphens: auto;
  font-size: 20px;
  background-color: #eee;
}

span {
  color: red;
}

<div class="limit">
  <p>
    Appletreefruitthing
  </p>
  <p>
    Apple<span>tree</span>fruitthing
  </p>
</div>

使用 lang 属性

按照 Vadim Ovchinnikov 的建议添加 lang 属性 ( <div class="limit" lang="en">) 可以在某些平台/浏览器组合上获得更好的结果。在 Firefox 54、Windows 10 上，结果如下：

但即使这样似乎也有问题。在我看来，连字符应该是黑色的，连字符算法似乎错过了在“水果”和“树”之间换行的机会，也完全忽略了max-width为容器设置的。

Answer 1

Chrome 仅对hyphens属性提供部分支持（仅 Mac 和 Android 平台），因此您无法使其在 Windows 上运行。

span对于此代码，我在 Firefox、IE 和 Edge（均在 Windows 上）中没有看到存在和不存在之间的任何区别。

为了使其在那里工作，您需要设置lang容器并添加供应商前缀（对于-ms-hyphensIE/Edge 和-webkit-hyphensSafari）。演示：

.limit {
  max-width: 50px;
  font-size: 20px;
  /* Safari */
  -webkit-hyphens: auto;
  /* IE, Edge */
  -ms-hyphens: auto;
  hyphens: auto;
  background-color: #eee;
}

span {
  color: red;
}

<div class="limit" lang="en">
  <p>
   Appletreefruitthing
  </p>
  <p>
    Apple<span>tree</span>fruitthing
  </p>
</div>

要在所有浏览器中工作，您可能不应该使用 CSS属性，只需在需要连字符的位置手动hyphens插入即可。­

.limit {
  max-width: 50px;
  font-size: 20px;
  background-color: #eee;
}

span {
  color: red;
}

<div class="limit">
  <p>
   Apple&shy;tree&shy;fruitthing
  </p>
  <p>
    Apple&shy;<span>tree</span>&shy;fruitthing
  </p>
</div>