若要在表格单元格溢出时使用省略号裁剪文本,需要在每个td
类上设置max-width
CSS属性,溢出才能正常工作.不需要额外的布局div
元素:
td
{
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
对于响应式布局,请使用max-width
CSS属性来指定列的有效最小宽度,或者只使用max-width: 0;
来实现无限的灵活性.此外,包含表需要特定的宽度,通常为width: 100%;
,列的宽度通常设置为总宽度的百分比
table {width: 100%;}
td
{
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td.column_a {width: 30%;}
td.column_b {width: 70%;}
历史记录:对于IE9(或更低版本),您需要在HTML中包含此选项,以修复特定于IE的呈现问题
<!--[if IE]>
<style>
table {table-layout: fixed; width: 100px;}
</style>
<![endif]-->