[CSS]表格td内的字符截断

常规字符截断的方式为:

<div style="width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串 </div>

其中的overflow:hidden; text-overflow:ellipsis; white-space:nowrap;是在确定宽度的情况下使用的。
由于本站主题INLOSIM和INLOSPEED的首页文章列表都是框定在表格内的,某些情况下需要对标题进行截断。发现用上面的方式不行。
解决方法:表格内字符的截断

首先要fixed表格布局

table标签必须定义table-layout: fixed;样式,比如

<table style="table-layout:fixed;">...</table>

其次定义th宽度

table标签fixed之后,th和td的宽度是平均分配的,这时候需要给th手动分配宽度,比如

<th width="300">...</th>

最后就可以对td进行字符截断了,使用用本文最开始的方法。

注意

使用上面的方法fixed之后,表格就不会随着分辨率缩小而缩小了。

赞(0)