CSS自動換行在表中不起作用

我需要創建一個帶有固定標題的表格，一個可在Y軸（但不在X軸上）滾動的表格體和固定寬度的列。CSS自動換行在表中不起作用

我發現這個答案，我的問題：https://stackoverflow.com/a/17585032/6033166

它的工作原理就像一個魅力（！非常感謝），我開始在此基礎上回答我的代碼。我添加了table-layout: fixed,word-wrap: break-word和overflow-y: auto; overflow-x: hidden;以解決我的其他需求。

但是仍有一個問題。如果一個非常長的文本被輸入到一個表格單元格中，沒有（或很少有）空格，則不會添加換行符，但寬度會因暴力而改變，表格行爲「騰出空間」大項目，將其他單元推向兩側。

我發現了關於SO的答案和建議，我可以將<wbr>標記添加到內容中，從而建議瀏覽器何時進行換行。這裏的問題是內容從數據庫中檢索（通過C＃），然後需要在顯示之前進行處理，如果可能的話，這是我想跳過的一個步驟。如果有什麼辦法，我想保留在CSS中。但是，如果沒有其他可能，我也很樂於接受其他解決方案。
我試過也打破所有，相同的結果。

這是我的表當前CSS：

table.tableSection { 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
    word-wrap: break-word; 
} 
table.tableSection thead, table.tableSection tbody { 
    float: left; 
    width: 100%; 
} 
table.tableSection tbody { 
    overflow-y: auto; 
    overflow-x: hidden; 
    height: 100px; 
} 
table.tableSection tr { 
    width: 100%; 
    display: table; 
    text-align: left; 
} 
table.tableSection th, table.tableSection td { 
    width: 33%; 
}

這是HTML代碼：

<table class="tableSection"> 
<thead> 
    <tr> 
     <th>1</th> 
     <th>2</th> 
     <th>3</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>Text</td> 
     <td>Text</td> 
     <td>Text</td> 
    </tr> 
    <tr> 
     <td>Text</td> 
     <td>This does work very well with blank spaces. The text has no limitation in size, line breaks will simply be added.</td> 
     <td>Text</td> 
    </tr> 
    <tr> 
     <td>Text</td> 
     <td>This_does_not_work_sadly,_which_is_a_huge_problem,_since_blank_spaces_are_not_permitted_as_word_delimiters.</td> 
     <td>Text</td> 
    </tr> 
    <tr> 
     <td>Text</td> 
     <td>Text</td> 
     <td>Text</td> 
    </tr> 
</tbody>

這裏是一個鏈接到我的jsfiddle來證明我的意思：https://jsfiddle.net/Fi_Vi/bmc7r8rz/3/

來源

2016-05-04 F_V

下面的代碼添加到您的TD CSS樣式table.tableSection th, table.tableSection td { ... }

word-break: break-all;

這裏是更新的小提琴： https://jsfiddle.net/bmc7r8rz/8/

來源

2016-05-04 12:25:49 Kruser

謝謝，完美的作品！我的錯誤與'文字中斷：全部打破';'是我把它放到'table.tableSection'中。 –

我會用簡單的：

table.tableSection th, table.tableSection td { 
    float: left; 
    width: 33%; 
    word-wrap: break-all; 
}

來源

2016-05-04 12:24:15 thepio

CSS自動換行在表中不起作用

回答

相關問題