如何使用CSS打破​​中的單個單詞？

Question

在table的td我有一個很長的一個字「火山肺矽病」，我想，以減少table的寬度，但不能因爲td之一這個長字我可以通過給打破這個詞做<br />，但有沒有任何CSS方式根據可用空間來打破這個詞。而不會給換行符或編輯HTML中的任何內容。

Answer 1

td span{display:block;width:your_max_width_here.px} 

<td><span>Pneumonoultramicroscopicsilicovolcanoconiosis</span></td> 

Answer 2

嘗試以下操作：

word-wrap: break-word; 
white-space: normal; 

自動換行是CSS3（但它在IE工程）。但是，您可能無法在舊版瀏覽器中使用它。

Answer 3

如果沒有任何空格，請嘗試使用以下代碼打破單詞。

word-wrap: break-word; 
word-break: break-all; 

Answer 4

對我來說，以下工作：

word-wrap: break-word; 
    word-break: break-all; 
    white-space: normal; 

Answer 5

下面的代碼應該工作;

td {word-break: break-all} 

Answer 6

試試我的代碼 -

隨着表身

table>tbody>tr>th{ 
    word-wrap: break-word; 
    word-break: break-all; 
    white-space: normal; 
} 

沒有表身

table>tr>th{ 
    word-wrap: break-word; 
    word-break: break-all; 
    white-space: normal; 
} 

Answer 7

我試圖在這裏和找到的解決辦法的不同組合其他頁面，但它從來沒有像我預期的那樣工作 - 短語w即使他們在下面的線上有空間，也會分裂，看起來很愚蠢。

最後我發現這種妥協：

table { 
    table-layout: fixed; 
    overflow-wrap: break-word; 
    word-wrap: break-word; /* IE */ 
} 

如果你要平等地對待你的行，它的效果最好。

Answer 8

我發現當你在單元格中混合了一些內容時，一些長單字與其他短單詞混合在一起，word-break: break-word;效果最好。如有可能，它將在空白處打破。儘管這在IE11中似乎不被支持。如果將break-all設置爲上述屬性中的任何一個，則它總是會在一個單詞內突破（除非它足夠幸運地在空間中）。