<p>是否可以在 CSS 中使用連字符或軟連字符，這樣就不會不必要地渲染連字符？ </p> <p>我的目標是盡可能保留原始文字並打破任何單詞，除非絕對關鍵，因為它們太長而無法適應容器寬度。 </p> <h3>我的具體案例</h3> <p>我想以這樣的方式渲染文字「Hi Superman」：</p> <p>如果「Superman」這個字太長而無法放入容器中，我想以某種方式將其連字符，例如：</p> <pre class="brush:php;toolbar:false;">Hi Super- man</pre> <p>但是，如果「Superman」這個字可以放入容器中，則必須在不使用連字號的情況下呈現它</p> <pre class="brush:php;toolbar:false;">Hi Superman</pre> <p>如果上述情況是可能的（“Superman”可以不加連字符），則添加<em>不必要的連字符</em>是不可接受的：</p> <pre class="brush:php;toolbar:false;">Hi Super- man</pre> <p>我可以根據需要更改 HTML。我可以以有意義的方式插入連字符（只要每個連字符之間超過 3 個字母就可以。“Superma-n”永遠不會好）</p> <h3>我嘗試過的</h3> <p>我認為軟連字符是解決方案。所以我用了：<code>Hi Super­man</code></p> <p>但我發現這會導致上面顯示的“不必要的連字符”的不可接受的情況。 </p> <h3>顯示失敗的程式碼片段：</h3> <p> <pre class="snippet-code-css lang-css prettyprint-override"><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></pre> <pre class="snippet-code-html lang-html prettyprint-override"><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></pre> </p> <p>我可以只使用 CSS 來解決上面的範例嗎？ （嘗試了不同的<code>word-break</code>屬性，但沒有成功）</p> <p><strong>我的猜測</strong>是，由於 CSS 的性質，只使用簡單的 HTML 和 CSS 是不可能解決這個問題的。我假設 CSS 只是逐行解析文本，它永遠無法知道某個單字是否「更適合」下一行文本。如果找到連字符，它將嘗試在當前文字行中容納最大數量的字符。 </p> <p>我想只使用 HTML 和 CSS 來解決這個問題，或者根本不使用。 </p> <p>最好是：</p> <ul> <li><p>不使用 JavaScript 進行文字解析。 </p> </li> <li><p>我不想根據 div 的寬度以及我認為文字是否需要連字符來為每個 div 設定不同的 CSS 屬性。 </p> </li> <li><p>不想在我的文字周圍加上包裝</p> </li> <li><p>沒有自動連字符會導致可笑的連字符，例如“Superma-n”（但是在緊要關頭，只要每個連字符之間有3 個字符，我就可以使用自動連字符。例如“Sup-erman” ”）</p> </li> </ul></p>

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>

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>