僅在必要時顯示連字符？ （軟連字符不會切斷它）

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</code> but it does not help< ;
<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>