本文介绍了一种使用CSS实现文本溢出时显示省略号并提供完整内容提示的方法。通过设置特定的样式，可以确保当文本长度超出预定宽度时自动显示省略号，并在鼠标悬停时展示完整文本。
一、直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.line-limit-length {
display: block;//块状显示
overflow: hidden;//隐藏文字
text-overflow: ellipsis;//显示...
white-space: nowrap; //不换行
width:100px;//超过100px就截取
}
</style>
</head>
<body>
<span class="line-limit-length" title="向日葵的花语是信念、光辉、高傲、忠诚、">向日葵的花语是信念、光辉、高傲、忠诚、</span>
</body>
</html>
二、简单说明
1、适用于块状的标签如div，代码用的span不是块状的，所以显示的时候要加上display:block才会显示出...的样式。若本身是块 状的标签，则不需要有该样式
2、一定要有title属性，才会在鼠标悬浮的时候显示全部的内容
3、标签要定义你预期的长度，当超过这个长度就显示...
扫一扫
8405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
