我已经尝试了几种方法(并在这里查找),但到目前为止都没有成功。因此,我要询问。
我的愿望:
我有以下简单的HTML:
<table>
<tr>
<td class="small">First column with text</td>
<td class="extend">This column should fill the remaining space but should be truncated if the text is too long</td>
<td class="small">Small column</td>
</tr>
</table>
First Column | The middle column should take the rest of the space and the text within should be ellipsised before it needs to break to a second line. | Last Column |
The table above should be 100% width of its parent container. The first and last column with the class "small" should be as large as they need to be, so the content can fit into it without a line break (equivalent to using "white-space: nowrap"). It is not feasible to set a fixed width for these columns as their content length may vary. The middle column with the class "extend" should take the remaining space within the table (to ensure the table stays within 100% width of its parent container) and the text within it should be truncated with an ellipsis before it breaks to a second line. Adding additional divs or spans is possible, but getting rid of the table altogether may also provide a solution. A working example can be found in this fiddle: http://jsfiddle.net/3bumk/113/.
white-space: nowrap
,它仍会导致表格溢出其父级边界。我还更新了 fiddle 来展示这一点。 - Tim Roes