HTML更改換行符觸發器？

Question

有什麼方法可以在CSS/HTML中更改哪些字符會導致文本中的換行符被允許？例如，如果我有包含文本「fooooooo/barrrrrrrrr」的表格數據，它不會在兩行上分割，但如果它包含「fooooooo barrrrrrrrr」，它會。

有什麼方法可以將標點符號添加到可觸發換行符的位置？

Answer 1

在CSS/HTML中不能更改導致，允許或防止文本換行符的字符集。但是，每個角色的每個都可能影響這樣的事情。也就是說，你不能一般說「在'/'被允許後換行'，但是你可以在特定的」/「出現後注入一些標記或內容以允許在那裏出現換行符。

請注意，瀏覽器具有不同的換行行爲。例如，Opera將斜槓「/」視爲允許在它之後換行。行爲也可能取決於上下文。請參閱我的頁面line breaking in browsers。

認爲過去很簡單，對於那些知道實際方法並且不太擔心標準器不願意接受它的人：<wbr>標籤。它仍然是簡單實用的方式，例如fooooooo/<wbr>barrrrrrrrr，但它不再是最具跨瀏覽器的方式。更新的方式，可以在HTML中編寫爲​的零寬度空間U + 200B在現代瀏覽器上運行良好，但在某些舊版本的IE中，它會創建一個混亂（一個小矩形顯示在控制字符出現）。

如果你願意使用一些詳細的代碼，你可以結合這兩種方式。您將同時使用<wbr>和帶有空白內容但帶有零寬度空間的內聯元素作爲生成的內容。這避免了IE 6上的問題，因爲它不支持CSS中生成的內容（但可識別<wbr>標記）。例如：

fooooooo/<wbr><a class=wbr></a>barrrrrrrrr 

與CSS代碼

.wbr:after { content: "\00200B"; } 

測試和演示：jsfiddle。

Answer 2

不，但有Unicode字符（最值得注意的是，U + 200B零寬度空間），這將允許在指定的點斷行而不插入任何可見的字符或空格。

Answer 3

你可以使用css word-wrap property讓你的長字被根據其容器寬度破：

word-wrap: break-word; 

Answer 4

只是作爲一個替代方案，我已經在過去使用下列內容：

<span style="display:block;float:left;" /> 

或更好的辦法是在你的css中定義這個：

.shy { display:block; float:left; } 

然後用：

<span class="shy" /> 

因此，如果您將上述內容放置在一串字符中，它將在需要時用作中斷。

stringthathasnospaceswhatsoever<span class="shy" />willbreakjustjustatthespan. 

Answer 5

有沒有辦法告訴瀏覽器允許包裝在特定的字符。

該CSS3 word-wrap: break-word;屬性將讓你的一部分，通過允許該行破壞任何字符。如果文本長於其包含元素的計算最大寬度，則會發生這種情況。

如果您動態生成HTML輸出服務器端，您可以執行正則表達式搜索並替換以在您希望（可選）換行的字符之前插入空格，但在不知道上下文的情況下，很難更具體一點。