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

Question

是否可以在 CSS 中使用连字符或软连字符，这样就不会不必要地渲染连字符？

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

我的具体案例

我想以这样的方式渲染文本“Hi Superman”：

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

Hi Super-
man

但是，如果“Superman”这个词可以放入容器中，则必须在不使用连字符的情况下呈现它

Hi
Superman

如果上述情况是可能的（“Superman”可以不加连字符），则添加不必要的连字符是不可接受的：

Hi Super-
man

我可以根据需要更改 HTML。我可以以有意义的方式插入连字符（只要每个连字符之间超过 3 个字母就可以。“Superma-n”永远不会好）

我尝试过的

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

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

显示失败的代码片段：

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

<code><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 <wbr> Super&amp;shy;man</code> but it does not help</p>
<p>  </p>
<div class="wide"><h2>Hi <wbr>Super&shy;man</h2></div></code>

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

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

我想仅使用 HTML 和 CSS 来解决这个问题，或者根本不使用。

最好是：

• 不使用 JavaScript 进行文本解析。

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

• 不想在我的文字周围添加包装

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

Answer 1

CSS 3 包含一个“hyphens”属性，可根据指定的 lang 属性设置连字符。但这只是一个工作草案，所以支持有点还没有。

您可以将其设置为

• 无，因此不会显示连字符
• 手动，因此它只会在声明特殊字符 &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 缺乏“自动”支持的常见解决方法是将 hyphens:auto 与 webkit 的 work-break:break-all 一起使用，因此文本将在支持它的浏览器上用连字符连接并且在 webkit 上不使用连字符换行。

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