为什么连字符不能与内部 一起使用？答案

【问题标题】：Why hyphens don't work with inner ?为什么连字符不能与内部 一起使用？
【发布时间】：2018-06-29 05:45:20
【问题描述】：

我正在尝试使用连字符处理包含  元素的文本以突出显示。这似乎打破了连字符算法。有什么方法可以解决这种行为，以便连字符的放置与没有  元素的情况相同？我不是在问像&shy;这样的解决方法

代码（沙盒：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 的建议 (<div class="limit" lang="en">) 添加 lang 属性可以在某些平台/浏览器组合上获得更好的结果。在 Firefox 54、Windows 10 上，结果如下：

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

【问题讨论】：

发生在哪个浏览器/操作系统中？在 Windows 上，Firefox 以相同的方式连接这两个词，不幸的是，Chrome 仍然存在doesn't supporthypens。此外，我必须将 lang="en" 设置为外部 div 才能使其在 Firefox 中工作。
顺便说一句，您想让它在所有浏览器中都能正常工作，还是只想知道为什么？
我看到您的示例中的连字符 p（不管内部 span 是否存在）在 Chrome、Firefox、IE 和 Edge (Win10) 中不起作用。
屏幕截图来自 OSX 上的 Chrome。 OSX 上的 Firefox Nightly 根本不起作用。理想情况下，解决方案可能会在任何地方都有效。

标签： css css-hyphens

【解决方案1】：

实际上，它确实适用于spans，在许多浏览器中。您刚刚使用了一个无法识别的词。这是一个普通英文单词的例子，它在 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 浏览器。所以你毕竟必须使用软连字符。但是正如您所说，您对该机制感到好奇，我认为仍然值得发布此答案。

【讨论】：

【解决方案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 属性，只需在需要连字符的位置手动插入 &shy;。

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

【讨论】：

谢谢！虽然这是一个有效的解决方法，但我真的在询问 hypthens 算法的行为。
@tobias47n9e 添加了有关hyphens 属性的详细信息。
不知道lang 标签是必需的。认为在 HTML 上设置它应该足够了。连字符从下一行突出显示有点奇怪。为什么突然溢出。它可以分为“树”和“果”吗？
@tobias47n9e 我不是英语专家。这个长词是有效的还是应该分成单独的较短的词以获得所需的结果？
我更新了问题以突出显示即使在设置 lang 属性时仍然存在的一些问题。似乎这是我今天早上测试的所有浏览器/平台组合所能获得的最好结果。

【解决方案3】：

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;
}

【讨论】：

谢谢！虽然这是一个有效的解决方法，但我真的在询问 hypthens 算法的行为。
这里有一些信息，请尝试查看“连字符资源”w3.org/TR/2011/WD-css3-text-20110412/#hyphens
我很惊讶没有更详细地介绍这个用例。文本经常需要额外的格式，为什么要改变单词的连字符方式。也许我应该为这个用例打开一个问题。最好在上设置一个属性，告诉连字符算法忽略此元素并仅读取文本。