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

Question

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

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

我的具体案例

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

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

Hi Super-
man

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

Hi
Superman

如果上述情况可行（"Superman" 可以写成不带连字符的），添加 不必要的连字符 是不可接受的，如下所示：

Hi Super-
man

我可以随心所欲地更改 HTML。我被允许以一种有意义的方式插入连字符（只要每个连字符之间的字母超过 3 个就可以。"Superma-n" 永远不会成功）

我试过的

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

但我发现这会导致上面显示的 "unnecessary hyphenation" 不可接受的情况。

显示失败的代码段：

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 只是逐行解析文本，它永远无法知道下一行文本中是否会有一个词 "fit better"。如果找到连字符，它将尝试在当前文本行中容纳最大数量的字符。

我只想用 HTML 和 CSS 解决这个问题，或者根本不用。编辑：最好是 -没有使用 javascript.

的文本解析

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

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

-没有自动断字会导致像 "Superma-n" 这样可笑的断字（但是在紧要关头，只要每个连字符之间有 3 个字符，我就可以使用自动断字。比如 "Sup-erman")

Answer 1

CSS 3 包含一个“hyphens”属性，它根据指定的 lang 属性设置断字。但它只是一个working draft, so support is kind of not there yet。

你可以设置为

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

编辑：哦，我确实发现了一个缺陷：在包装器中确实中断的词占据了所有两行，而不是让较短的词出现在同一行上。在下面的示例中，如果没有这个技巧，文本 "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>

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

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

Show hyphens only when necessary? (soft-hyphens doesn't cut it)

html

css

hyphen

word-break

soft-hyphen

我的具体案例

我试过的

显示失败的代码段：

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

Show hyphens only when necessary? (soft-hyphens doesn't cut it)

html

css

hyphen

word-break

soft-hyphen

我的具体案例

我试过的

显示失败的代码段：

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