为什么连字符不适用于内部 <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">) 可以在某些 platform/browser 组合上获得更好的结果。在 Firefox 54 上，Windows 10 结果如下：

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

Answer 1

hyphens: manual

与

在一起

&shy;

可能有用在这里查看文档 https://css-tricks.com/almanac/properties/h/hyphenate/

codepen 上的这段代码似乎有效

<div class="limit">
  <p>
   Appletreefruitthing
  </p>
  <p>
    Apple&shy;<span>tree</span>&shy;fruit&shy;thing
  </p>
</div>

CSS

.limit {
  hyphens: manual;
}

Answer 2

Chrome 仅部分支持 hyphens 属性（仅 Mac 和 Android 平台），因此您无法使其在Windows.

对于此代码，我没有发现 span 在 Firefox、IE 和 Edge（全部在 Windows 上）存在和不存在之间有任何区别。

要让它在那里工作，您需要为容器设置 lang 并添加供应商前缀（对于 -ms-hyphens IE/Edge 和 -webkit-hyphens 对于 Safari）。演示：

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

Answer 3

实际上，它确实适用于 spans，在许多浏览器中。您刚刚使用了一个无法识别的词。这是一个普通英文单词的例子，它在 IE 中工作（应该也可以在 Edge 中工作）和 FF 在 Win7 中工作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1">
    <title>Demo</title>
<style>
div {
    max-width: 50px;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font-size: 20px;
    background-color: #eee;
}
span {
    color: red;
}
</style>
</head>
<body>
    <div>
        <p>Incomprehensibilities</p>
        <p>Incom<span>pre</span>hensibilities</p>
    </div>
</body>
</html>

它在 Chrome Win 中不起作用，因为目前（2018 年 6 月）仍然完全不支持连字符。它也不适用于任何 iOS 浏览器。所以你毕竟必须使用软连字符。但是正如你所说的那样，你对这个机制感到好奇，我认为仍然 post 这个答案是值得的。

为什么连字符不适用于内部 <span>？

Why hyphens don't work with inner <span>?

css

css-hyphens

使用 lang 属性