12

是否可以在 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 个字符，我就可以使用自动自动连字符。就像“超人”）

4

2 回答 2

5

CSS 3 包含一个 " hyphens" 属性，它根据指定的lang属性设置断字。但这只是一个工作草案，所以还没有支持。

您可以将其设置为

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

在 Firefox、Edge 甚至 IE 中都像魅力一样工作，但主要问题是 webkit 不支持“auto”值。除了在 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 上不使用连字符进行换行。

于 2018-01-11T15:06:44.603 回答
3

使用带有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>

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

于 2018-01-11T15:12:32.393 回答