如何在連字符 (-) 等特殊字符后斷詞

Question

給定一個相對簡單的 CSS：

 div { width: 150px; }

 <div> 12333-2333-233-23339392-332332323 </div>

如何使字符串保持在150的width內，並在連字符上換行？

Answer 1

用這個替換你的連字符：

­

它被稱為“軟”連字符。

 div { width: 150px; }

 <div> 12333&shy;2333&shy;233&shy;23339392&shy;332332323 </div>

Answer 2

在所有現代瀏覽器^* （以及一些較舊的瀏覽器中）中， <wbr>元素是提供在特定點打破長詞的機會的完美工具。

引用該鏈接：

Word Break Opportunity ( <wbr> ) HTML 元素表示瀏覽器可以選擇在文本中換行的位置，盡管它的換行規則不會在該位置創建換行符。

以下是它在 OP 示例中的使用方式（或在JSFiddle 中查看它的實際效果）：

<div style="width: 150px;">
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

^*我已經在 IE9、IE10 以及最新版本的 Chrome、Firefox、Opera 和 Safari 中對其進行了測試。

 div { width: 150px; }

 <div> 12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323 </div>

Answer 3

作為 CSS3 的一部分，它尚未得到完全支持，但您可以在此處找到有關自動換行的信息。 另一個選項是wbr 標簽、­ 和 ​ 也沒有完全支持。

Answer 4

在這個特定實例中（您的字符串將包含連字符），我會將文本轉換為此服務器端：

 <div style="width:150px;"> <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span> </div>

Answer 5

您的示例在 Google Chrome、Safari (Windows) 和 IE8 中按預期工作。 文本在 Firefox 3 和 Opera 9.5 中超出 150px 框。

另外­ 不適用於您的示例，因為它會：

• 斷字時工作但不斷字時不顯示任何連字符，或

• 在不斷字時工作，但在斷字時顯示兩個連字符，因為它在中斷時添加了一個連字符。

Answer 6

根據您想要准確查看的內容，您可以使用hyphen 、 soft hyphen和/或zero width space 。

在軟連字符上，您的瀏覽器可以斷字（添加連字符）。 在零寬度空間上，您的瀏覽器可以斷字（不添加任何內容）。

因此，如果您的代碼類似於：

111111­222222­-333333​444444-​555555

然后您的瀏覽器將顯示此內容而沒有斷字：

1111112222222-33333334444444-5555555

這將是所有可能的斷字：

111111-
222222-
-333333
444444-
555555

只需選擇您需要的選項。 在你的情況下，它可能是 4s 和 5s 之間的那個。

Answer 7

您還可以使用：

word-break:break-all;

前任。

<div style='width:10px'>ababababababbabaabababababababbabababa</div>

輸出：

abababababa
ababababbba
abbabbababa
ababb

word-break 是中斷所有單詞或行，即使句子中沒有空格，而不是提供的寬度或高度。 為此，您必須提供寬度或高度。

Answer 8

不間斷連字符效果很好。

HTML 實體（十進制）

‑

Answer 9

而不是-你可以使用‐ 或\‐ 。

另外，請確保hyphens css 屬性未設置為none （默認值為manual ）。

<wbr>不受Internet Explorer支持。

Answer 10

希望這可能會有所幫助

在要換行的地方使用<br> (break) 標簽。

Answer 11

您可以在連字符后使用 0 寬度空間：

 div { width: 150px; }

 <div> 12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323 </div>

如果您想在連字符之前換行，請使用​-代替。