css 设置文字超出长度用省略号代替 + 鼠标悬停显示全文 + 行内元素向下偏移修正

Sparrowflying

于 2018-06-14 16:40:13 发布

阅读量5.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS html

本文链接：https://blog.youkuaiyun.com/Sparrowflying/article/details/80694796

html 同时被 2 个专栏收录

11 篇文章

订阅专栏

CSS

9 篇文章

订阅专栏

本文介绍如何使用CSS实现文本超出长度时显示为省略号的效果，并提供了一个具体的实例，包括设置宽度、隐藏溢出、单行显示及文本溢出等属性。

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

1. css 设置文字超出长度用省略号代替，下面四个属性缺一不可

width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;

2.鼠标悬停显示全文

title="全文全文全文全文全文全文全文";

3.应用【 display:inline-block；】后引起行内元素向下偏移

添加样式：vertical-align: bottom;

总结：

<span style="display: inline-block;width:150px;;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align: bottom;" title="全文全文全文全文全文全文全文">全文全文全文全文全文全文全文</span>

css 设置文字超出长度用省略号代替 + 鼠标悬停显示全文 + 行内元素向下偏移修正

1. css 设置文字超出长度用省略号代替，下面四个属性缺一不可

2.鼠标悬停显示全文

3.应用【 display:inline-block； 】后引起行内元素向下偏移

总结：

3.应用【 display:inline-block；】后引起行内元素向下偏移