jsp页面，当要显示的文本内容过多时，用省略号代替

最新推荐文章于 2023-04-20 09:13:33 发布

原创最新推荐文章于 2023-04-20 09:13:33 发布 · 1.2w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#jsp #div #class

jsp 同时被 2 个专栏收录

4 篇文章

订阅专栏

html

3 篇文章

订阅专栏

本文详细介绍了在网页中使用CSS属性overflow、text-overflow和white-space来实现文本溢出时的省略号显示，并通过title属性在鼠标悬浮时完整显示文本的方法。同时，还展示了如何在表格中应用此技术，确保列内容过多时依然能够清晰展示关键信息。

//当要显示的文本内容过多时，用省略号表示（由overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 这三个属性设置）；当鼠标定位到该处时，又可完整显示出来（由title属性设置）

<h3>This is a header</h3>
<p>This is a paragraph.</p>

<div class=ellipsis_div
style="width:120px;background-color:#cc88ff;" title="somelongtextsomelongtext">somelongtextsomelongtext</div>

</body>
</html>

//当列的内容过多时，用省略号表示，当鼠标定位到该处时，又可完整显示出来
/*注意，不能直接在<td>里面添加那些属性，例如<td style="width:120px;background-color:#cc88ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="somelongtextsomelongtext"> ,要在<td>下在使用<div>来设置。*/

<h3>This is a header</h3>
<p>This is a paragraph.</p>

<table>
<td>
<div style="width:120px;background-color:#cc88ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="somelongtextsomelongtext">
somelongtextsomelongtext
</div>
</td>
<td>
<div style="width:110px;background-color:#dddddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="some long text">some long text</div>
</td>
</table>

</body>
</html>