仅在必要时显示连字符?(软连字符不会切断它) [英] Show hyphens only when necessary? (soft-hyphens doesn't cut it)

问题描述

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

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

我的具体案例

我想以如下方式渲染文本Hi Superman":

如果超人"这个词太长而无法放入容器中，我想以某种方式将其连字符，例如:

嗨超级-男人

但是如果超人"这个词可以放入容器中，则必须在渲染时不带连字符

嗨超人

如果上述情况是可能的(超人"可以写成不带连字符的)，像这样添加不必要的连字符是不可接受的:

嗨超级-男人

我可以随意更改 HTML.我被允许以有意义的方式注入连字符(只要每个连字符之间有超过 3 个字母就可以了.Superma-n"永远不会好的)

我的尝试

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

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

显示失败的代码段:

body {左边距:30px；}div {边框:纯 1px 黑色；}.宽的 {边框:纯 1px 蓝色；宽度:500px；}.狭窄的 {边框:实心 1px 红色；宽度:360px；}h2{font-family: 'Courier New';字体粗细:400；字体大小:87px；}代码 {背景色:#eee;}

<p><code>Super&amp;shy;man</code>在非常狭窄的容器中看起来不错，其中超人"这个完整的词不适合</p><p><div class="narrow"><h2>Hi Super&shy;man</h2></div><p>但是在这种情况下，超人"这个词将适合在第二行不加连字符.但是该死的 CSS 还是决定添加连字符.在我的情况下是不可接受的！同样，这使用与前一个示例相同的代码<code>Super&amp;shy;man</code></p><div class="wide"><h2>Hi Super&shy;man</h2></div><p>我什至尝试在超人"之前添加一个断字标签，就像这样<code>嗨&lt;wbr>Super&amp;shy;man</code>但它没有帮助</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 个字符，我就可以使用自动断字.比如超人")

解决方案

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

body {左边距:30px；}div {边框:纯 1px 黑色；}.宽的 {边框:纯 1px 蓝色；宽度:500px；}.狭窄的 {边框:实心 1px 红色；宽度:360px；}h2{font-family: 'Courier New';字体粗细:400；字体大小:87px；}代码 {背景色:#eee;}.unbreakable {display:inline-block}

<p><code>Super&amp;shy;man</code>在非常狭窄的容器中看起来不错，其中超人"这个完整的词不适合</p><p><div class="narrow"><h2>Hi <span class="unbreakable">Super&shy;man</span></h2></div><p>在这种情况下，超人"这个词可以不加连字符放在第二行.<br/>这使用与前一个示例相同的代码
<div class="wide"><h2>Hi <span class="unbreakable">Super&shy;man</span></h2></div>

哦，我确实发现了一个缺陷:在包装器中断行的单词会占用所有两行，而不是允许在同一行中使用较短的单词.在下面的示例中，如果没有这个技巧，文本man is"就可以放在一行中.

body {左边距:30px；}.狭窄的 {边框:实心 1px 红色；宽度:360px；}h2{font-family: 'Courier New';字体粗细:400；字体大小:87px；}.牢不可破的{显示:内联块}

<h2><span class="unbreakable">Super&shy;man</span></h2>

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

Is it possible to use hyphens, or soft-hyphens in CSS, in such a way that hyphens are not rendered unnecessarily?

My goal is to keep the original text as much as possible and break any words unless absolutely critical because they are too long to fit the container width.

My specific case

I want to render the text "Hi Superman" in such a way that:

If the word "Superman" is too long to fit inside a container, I want to hyphenate it in some way, for instance:

Hi Super-
man

But if the word "Superman" could fit in the container it must be rendered without hyphens

Hi
Superman

If the case above is possible ("Superman" could be written unhyphenhated) it is UNACCEPTABLE to add unnecessary hyphens like this:

Hi Super-
man

I can change the HTML however I want. I'm allowed to inject hyphens in a way that makes sense (As long as there's more than 3 letters between each hyphen it's okay. "Superma-n" is never okay)

What I've tried

I thought soft-hyphens would be the solution. So I used: Hi Super­man

But I found out that this will result in the unacceptable case of "unnecessary hyphenation" shown above.

Snippet to show the failure:

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>

Can I solve the example above with just CSS? (Tried different word-break properties without any success)

My guess is that this is impossible to solve this with just simple HTML and CSS due to the nature of CSS. I assume CSS just parses text line-by-line and it can never know if a word would "fit better" on the next row of text. If it finds a hyphen, it will try to fit the maximum amount of chars on the current line of text.

I want to solve this with just HTML and CSS or not at all. Edit: Preferrably -No text-parsing with javascript.

-I don't wanna have to set different CSS-properties per div based on how wide the div is and whether I guess the text will need hyphenation or not.

-Would prefer not to have to add wrappers around my words

-No auto-hyphenation that can result in laugahble hyphenations like "Superma-n" (However in a pinch I would be ok with auto-autohyphenation as long as there's 3 chars between each hyphen. Like "Sup-erman")

解决方案

Use a container with display: inline-block around the long words.

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>

Edit: Oh, I did find a flaw: words that do break in the wrapper take up all of the two lines rather than allowing shorter words on the same line. In the below example, the text "man is" would have fit on one line if it hadn't been for this trick.

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>

So, no, not perfect. Sorry.

这篇关于仅在必要时显示连字符?(软连字符不会切断它)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！