只在真正需要时显示连字符？(软连字符不切断)

Question

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

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

我的具体情况

我希望以这样的方式呈现文本"Hi Superman":

如果单词"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"这样的laugahble连字符(但是只要在每个连字符之间有3个字符,我就可以使用自动自动连接.就像"Sup-erman")

Answer 1

CSS 3包含一个" hyphens"属性,它根据指定的lang属性设置连字符.但它几乎不是一份工作草案,所以支持还不存在.

您可以将其设置为

• 没有,所以不会显示连字符
• 手动,所以它只会在&shy声明特殊字符的地方打破单词,或者
• auto,根据本地化,自动在需要的地方添加连字符.

就像Firefox,Edge甚至IE中的魅力一样,但主要问题是webkit不支持"自动"值.除了mac和android之外,它是唯一值得接受的值.是的,就是那种奇怪的虫子.

这是一个例子,如果你正在运行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和work-break:break-allwebkit 一起使用,因此文本将在支持它的浏览器上进行连字,并且在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>

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