Css 为什么连字符不'；不要与内部人员一起工作<；span>；？

我正在尝试让连字符处理包含用于高亮显示的

元素的文本。这似乎打破了连字符算法。是否有任何方法可以修复该行为，使连字符的放置方式与不使用

元素的情况相同？ 我不是在问像

­


代码（沙盒：）：


.limit{
最大宽度：50px；
连字符：自动；
字体大小：20px；
背景色：#eee；
}
跨度{
颜色：红色；
}


苹果果


苹果果


结合

­

可能有用
请参阅此处的文档

代码笔上的代码似乎可以工作

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

Chrome仅部分支持
连字符
属性（仅限Mac和Android平台），因此无法在Windows上运行

对于这段代码，我看不出Firefox、IE和Edge（都在Windows上）中存在和不存在的区别

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


.limit{
最大宽度：50px；
字体大小：20px；
/*狩猎*/
-webkit连字符：自动；
/*埃奇*/
-ms连字符：自动；
连字符：自动；
背景色：#eee；
}
跨度{
颜色：红色；
}


苹果果


苹果果

实际上，它在许多浏览器中都可以与
span
s一起使用。你刚刚用了一个不被识别的词。下面是一个普通英语单词的示例，该单词在IE（也应在Edge中使用）和Win7上的FF中使用：



演示
div{
最大宽度：50px；
-webkit连字符：自动；
-moz连字符：自动；
-ms连字符：自动；
连字符：自动；
字体大小：20px；
背景色：#eee；
}
跨度{
颜色：红色；
}
不可理解

不可理解

在哪个浏览器/操作系统中发生？在Windows上，Firefox以相同的方式连字符，不幸的是，Chrome仍然在那里大肆渲染。另外，我必须将
lang=“en”
设置为outer
div
才能在Firefox中工作。顺便说一句，你想让它在所有浏览器中工作，或者你只想知道为什么？我看到你例子中的
p
（无论内部
span
是否存在）连字符在Chrome、Firefox、IE和Edge（Win10）中都不起作用.屏幕截图来自OSX上的Chrome。OSX上的Firefox每晚都不工作。理想情况下，解决方案可能适用于任何地方。谢谢！虽然这是一个有效的解决方法，但我确实在询问hypthens算法的行为。这里有一些信息，请尝试查看“断字资源”，我很惊讶这个用例没有得到更详细的介绍。文本经常需要额外的格式，为什么这会改变文字被夸大的方式呢。也许我应该为这个用例打开一个问题。最好在上设置一个属性，告诉连字符算法忽略此元素并读取文本。谢谢！虽然这是一个有效的解决方法，但我确实在了解hypthens算法的行为。@tobias47n9e添加了有关
连字符
属性的详细信息。不知道需要
lang
标记。我认为在HTML上设置它就足够了。有点奇怪，连字符从下一行获得高亮显示。为什么会突然出现溢流呢。它可以分为“树”和“果”？@tobias47n9e我不是英语专家。这个长单词是否有效，或者应该拆分为单独的短单词以获得所需的结果？我更新了问题，以突出显示即使在设置
lang
属性时仍然存在的一些问题。这似乎是我今天早上测试的所有浏览器/平台组合所能得到的最好结果。
<div class="limit">
  <p>
   Appletreefruitthing
  </p>
  <p>
    Apple&shy;<span>tree</span>&shy;fruit&shy;thing
  </p>
</div>

.limit {
  hyphens: manual;
}