Question

我试图让连字符处理内部有<span>元素的文本以突出显示。这似乎打破了连字符算法。有没有办法修复行为，以便连字符与没有<span>元素相同？我没有询问像

这样的解决方法

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用lang属性

添加lang属性为Vadim Ovchinnikov建议（<div class="limit" lang="en">）可以在某些平台/浏览器组合上获得更好的结果。在Firefox 54上，Windows 10就是结果：

但即便如此，这似乎也是错误的。在我的观点中，连字符应该是黑色的，并且连字符算法似乎错过了在＆＃34; fruit＆＃34;之间划线的机会。和＆＃34;树＆＃34;，也完全忽略为容器设置的max-width。

Answer 1

实际上，它在许多浏览器中都适用于span。您只是使用了无法识别的单词。这是一个使用普通英语单词的示例，该示例在IE（也应该在Edge）中运行，并且在Win7上运行FF：

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

它无法在Win上的Chrome中运行，因为当前（2018年6月）仍然完全不支持连字符。它也不适用于任何iOS浏览器。因此，您毕竟必须使用软连字符。但是正如您所说的那样，您对这种机制感到好奇，我认为仍然值得发布此答案。

Answer 2

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

我认为此代码在Firefox，IE和Edge（所有在Windows上）span存在与缺席之间没有任何区别。

要使其在那里工作，您需要为容器设置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

&shy;

togteher with

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

可能会奏效请参阅此处的文档 https://css-tricks.com/almanac/properties/h/hyphenate/

这个代码在codepen上似乎有用

.limit {
  hyphens: manual;
}

CSS

set path="C:\Program Files\Heroku\bin"

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

使用lang属性

3 个答案: