相关疑难解决方法(0)

我正在尝试让连字符处理<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为容器设置的。