HTML标签固定宽度文字超过部分展示为省略号,鼠标悬浮时显示全部信息

最新推荐文章于 2023-03-23 17:29:09 发布

原创最新推荐文章于 2023-03-23 17:29:09 发布 · 2.7k 阅读

7 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CSS实现文本溢出时显示省略号的效果，通过设置display、width、overflow、text-overflow和white-space属性，可以使得超出宽度的文字以省略号代替，适用于网页布局中文字展示的优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css

div {
    display: block;
    width:100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    text-align:left;/*文字左对齐*/
}

html

<div title="撒旦法是否大是大非萨芬的阿斯蒂芬阿斯蒂芬阿斯蒂芬暗室逢灯暗室逢灯暗室逢灯阿斯顿发送到发送到发送到发送到防守打法撒旦法士大夫" >            
    撒旦法是否大是大非萨芬的阿斯蒂芬阿斯蒂芬阿斯蒂芬暗室逢灯暗室逢灯暗室逢灯阿斯顿发送到发送到发送到发送到防守打法撒旦法士大夫
</div>

演示结果
在这里插入图片描述