仅在必要时显示连字符？ （软连字符不会削减它）

Posted 2023-02-18

【中文标题】仅在必要时显示连字符？ （软连字符不会削减它）

【英文标题】：Show hyphens only when necessary? (soft-hyphens doesn't cut it)

【发布时间】：2018-06-20 22:14:33

【问题描述】：

是否可以在 CSS 中使用连字符或软连字符，以免不必要地呈现连字符？

我的目标是尽可能保留原始文本并打破任何单词，除非绝对关键，因为它们太长而无法适应容器宽度。

我的具体情况

我想以这样的方式呈现文本“Hi Superman”：

如果“超人”这个词太长而无法放入容器中，我想以某种方式将其连字符连接起来，例如：

Hi Super-
man

但如果“超人”这个词可以放入容器中，则它必须在没有连字符的情况下呈现

Hi
Superman

如果上述情况是可能的（“超人”可以写成不带连字符的），像这样添加不必要的连字符是不可接受的：

Hi Super-
man

我可以随意更改 html。我被允许以一种有意义的方式注入连字符（只要每个连字符之间有 3 个以上的字母就可以了。“Superma-n”永远不行）

我尝试过的

我认为软连字符会是解决方案。所以我用了：Hi Super­man

但我发现这会导致上面显示的“不必要的连字符”这种不可接受的情况。

显示失败的片段：

body  
  margin-left: 30px;

div 
   border: solid 1px black;

.wide 
  border: solid 1px blue;
      width: 500px;

.narrow  
  border: solid 1px red;
  width: 360px;

 h2 
   font-family: 'Courier New';
    font-weight: 400;
    font-size: 87px;
  
code 
 background-color: #eee;

<p> <code>Super&amp;shy;man</code> looks good in really narrow containers where the full word "Superman" would not fit</p>
<p>
<div class="narrow"><h2>Hi Super&shy;man</h2></div>

<p>But in this case the word "Superman" would fit unhypenhated on the second row. But the damn CSS decides to add hyphens anyway. Unacceptable in my case!
Again, this uses the same code as the previous example
<code>Super&amp;shy;man</code></p>
<div class="wide"><h2>Hi Super&shy;man</h2></div>

<p>I even tried adding a wordbreak tag before "Superman", like this <code>Hi &lt;wbr&gt; Super&amp;shy;man</code> but it does not help</p>
<p>  </p>
<div class="wide"><h2>Hi <wbr>Super&shy;man</h2></div>

我可以只用 CSS 解决上面的例子吗？ （尝试了不同的word-break 属性但没有成功）

我的猜测是，由于 CSS 的性质，仅使用简单的 HTML 和 CSS 是不可能解决这个问题的。我假设 CSS 只是逐行解析文本，它永远无法知道一个词是否会“更适合”下一行文本。如果它找到一个连字符，它将尝试在当前文本行中容纳最大数量的字符。

我想只用 HTML 和 CSS 来解决这个问题，或者根本不用。 编辑： 最好 - 不使用 javascript 进行文本解析。

-我不想根据 div 的宽度以及我是否猜测文本是否需要连字符来为每个 div 设置不同的 CSS 属性。

-不想在我的话周围添加包装器

-没有自动连字符会导致像“Superma-n”这样的可笑连字符（但是在紧要关头，只要每个连字符之间有 3 个字符，我就可以使用自动自动连字符。就像“超人”）

【问题讨论】：

我认为你将不得不接受失败或拥抱 JavaScript。您尝试呈现Superman 的方式几乎就是断字试图避免的情况。 supposed 将单词连字符以尽可能多地保留在一行中。您正在尝试偏离其默认功能。

我指望不得不放弃。我并不急于解决这个问题，以至于我会做任何事情。我只是想检查是否有人对此有一个我不知道的简单 html+css hack。但我假设没有。

这个怎么样：jsfiddle.net/vy6ptnmj/39

@uom-pgregorio：不。这是不可接受的“不必要的连字符”的完美示例。即使容器足够宽以容纳完整的每个单词，它也会破坏和连字符较长的单词jsfiddle.net/9dmrky6y/1 我的目标是不要通过添加连字符来修改原始文本，除非它很关键，因为单词太长而无法容纳容器

【参考方案1】：

CSS 3 包含一个“hyphens”属性，它根据指定的lang 属性设置断字。但它几乎不是working draft，所以支持有点像not there yet。

你可以设置成

无，因此不会显示连字符 手动，因此它只会在声明了特殊字符 &shy 的地方分词，或者 auto，它会根据本地化在需要的地方自动添加连字符。

在 Firefox、Edge 甚至 IE 中都像魅力一样工作，但主要问题是 webkit 不支持“auto”值。除了在 mac 和 android 上，这是他们接受的唯一值。是的，这很奇怪bug。

这是一个示例，如果您运行的是 windows / linux，请务必检查 firefox 和 chrome 之间的区别。

p  
  width: 55px;
  border: 1px solid black;
 
p.none 
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;

p.manual 
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;

p.auto 
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;

<ul>
    <li><code>auto</code>: hyphen where the algorithm is deciding (if needed)
    <p lang="en" class="auto">An extremelyasdasd long English word</p>
  </li> 
  <li><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)
    <p lang="en" class="manual">An extreme&shy;lyasd long English word</p>
  </li>
  <li><code>none</code>: no hyphen; overflow if needed
    <p lang="en" class="none">An extreme&shy;lyasd long English word</p>
  </li>
</ul>

在 webkit 上缺少“自动”支持的常见解决方法是在 webkit 上使用连字符：auto 和 work-break:break-all，因此文本将在支持它的浏览器上使用连字符，并且在 webkit 上不使用连字符进行换行。

【讨论】：

现在你让我好奇了。你的 sn-p 在 Chrome 和 Firefox 中对我来说看起来完全一样。也许是最近的更新？

cj750 第一个块（带有自动而不是“害羞”的块）对您正确使用连字符吗？如果是这样，您使用的是哪个平台？

第一个带有hyphens: auto 的块连字符为“ex-tremely”，而最后一个带有hyphens: manual 的块连字符为“extreme-ly”。但重要的是它至少确实连字符。我正在 Mac 上查看 Chrome 63 和 Firefox Developers Version 58。

@cjl750 是的，这是因为 webkit 上缺乏对连字符的支持：auto 因平台而异。我只是用澄清编辑了答案。显然这是一个非常非常错误的行为，它导致 Mac 和 Android 中的 webkit 仅接受“auto”值，而所有其他人接受 任何值，但“auto”。

有趣！好吧，有了这个额外的花絮，我认为这是一个很好的答案，而且你快了 16 秒，所以我删除了我的 =P

【参考方案2】：

在长词周围使用带有display: inline-block 的容器。

body  
  margin-left: 30px;

div 
   border: solid 1px black;

.wide 
  border: solid 1px blue;
      width: 500px;

.narrow  
  border: solid 1px red;
  width: 360px;

 h2 
   font-family: 'Courier New';
    font-weight: 400;
    font-size: 87px;
  
code 
 background-color: #eee;


.unbreakable display:inline-block

<p> <code>Super&amp;shy;man</code> looks good in really narrow containers where the full word "Superman" would not fit</p>
<p>
<div class="narrow"><h2>Hi <span class="unbreakable">Super&shy;man</span></h2></div>

<p>And in this case the word "Superman" would fit unhypenhated on the second row.<br/>
This uses the same code as the previous example</p>
<div class="wide"><h2>Hi <span class="unbreakable">Super&shy;man</span></h2></div>

编辑：哦，我确实发现了一个缺陷：在包装器中中断的单词占据了所有两行，而不是在同一行上允许较短的单词。在下面的示例中，如果不是因为这个技巧，文本“man is”本来可以放在一行中。

body 
  margin-left: 30px;


.narrow 
  border: solid 1px red;
  width: 360px;


h2 
  font-family: 'Courier New';
  font-weight: 400;
  font-size: 87px;


.unbreakable 
  display: inline-block

<div class="narrow">
  <h2><span class="unbreakable">Super&shy;man</span> is coming.</h2>
</div>

所以，不，不完美。对不起。

【讨论】：

此解决方案不是 100%，因为您必须提前决定要包装哪些单词。因此，它不适用于响应速度超快的世界，有时您需要 8 个字符的单词才能牢不可破，而其他时候需要 12 个字符的单词。但这 99% 已经足够好了，因为在我的情况下，我会满足于一直包装 8 个字符的单词并收工。不得不换行是丑陋的，但至少它有效并且易于实现。

@Drkawashima 好吧，如果您只是将包含­ 字符的所有单词都换行，您就不必根据具体情况决定换行。

我只是想到了一个真正的缺陷，它使这个解决方案不够完美；请参阅添加的编辑。对不起。

我明白了。但我可以忍受这个问题。我的主要要求是避免通过添加连字符来不必要地更改单词。将一个单词下放到一个新的行并不是一个大问题。

我将把它标记为答案，因为我的主要目标是只在真正需要时添加连字符，这样就可以了。