CSS设置属性
.f-els3{width: 6.6rem; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;text-align: left;}
.f-els3_3{width: 1.5rem; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; text-align: center;}
width: 1.5rem; 宽度设置为相对值;
overflow: hidden; 超出部分隐藏;
text-overflow:ellipsis; 超出部分添加省略号;
white-space: nowrap; 不换行;
text-align: center; 文字居中;
注意:以上除了 white-space: nowrap; 可以对<td>标签起作用,其他都不起作用,
所以需要把文字放在<div>中,即<td><div>文字</div></td>,这样才能实现效果。
<table class="improve_table f-font4">
<thead>
<tr>
<th width="30%">项目名</th>
<th width="10%"><div class="f-els3_3">类别</div></th>
……
</tr>
</thead>
<tbody id="projectList">
<c:forEach items="${projectDetailData}" var="var" varStatus="vs">
<tr>
<td><div class="f-els3" title='${var.subject }'>${var.subject }</div></td>
<td><div class="f-els3_3" title='${var.projectType }'>${var.projectType }</div></td>
……
</tr>
</c:forEach>
</tbody>
</table>
title='${var.projectType }'即鼠标移动上去显示的内容。
实际效果: