在实际开发中会遇到这样的情况,jsp采用table布局,但是td不能完全展示目标内容,导致td宽度外的文字以...省略号的形式展示。但是客户又想看到全部的内容。这时候只需要设置td的一些属性,就可以解决此问题。
<td title="<%=dt.getString(i, "DESCRIPTION") == null ? "" : dt.getString(i, "DESCRIPTION")%>" align="left width="15%">
<div style="width:160px;white-space: nowrap;text-overflow:ellipsis; overflow:hidden;"><%=dt.getString(i, "DESCRIPTION") == null ? "" : dt.getString(i, "DESCRIPTION")%></div></td>
</td>
上边代码中td标签的title属性,是鼠标悬浮在td上时所展的td全部内容,里边的div是界面上展示的内容,超过td尺寸内容过多会以省略号形式展示。
效果如下图:
鼠标悬浮在相应的td上显示全部内容