5

我正在尝试让连字符处理<span>包含用于突出显示的元素的文本。这似乎打破了连字符算法。有什么办法可以解决这种行为，以便连字符的放置与没有<span>元素的情况相同？我不是在问像这样的解决方法&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为容器设置的那个。

4

3 回答 3

2

实际上，它确实适用于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 浏览器。所以你毕竟必须使用软连字符。但是正如您所说，您对该机制感到好奇，我认为仍然值得发布此答案。

于 2018-06-28T21:03:18.913 回答
1

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

对于此代码，我看不出span在 Firefox、IE 和 Edge（都在 Windows 上）中存在和不存在之间有任何区别。

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

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

于 2017-07-26T07:37:00.567 回答
0 
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;
}
于 2017-07-26T07:32:38.617 回答