您的位置：首页 > Web前端 > CSS

CSS实现多行文本溢出显示省略号

2016-10-17 19:02 423 查看
单行文本溢出显示省略号，可以直接使用

text-overflow:ellipsis; white-space:nowrap;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
div{width: 200px; height: 40px; line-height: 20px; border: 1px solid red; margin-top: 100px; margin-left: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
</style>
</head>
<body>
<div>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</body>
</html>


多行文本溢出显示省略号

方案一 使用webkit属性-webkit-line-clamp（注意这是一个不规范的属性）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
div{width: 200px; height: 40px; line-height: 20px; border: 1px solid red; margin-top: 100px; margin-left: 100px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
</style>
</head>
<body>
<div>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</body>
</html>


方案二 通过::after伪类添加省略号（兼容性较好）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
div{width: 200px; height: 40px; line-height: 20px; border: 1px solid red; margin-top: 100px; margin-left: 100px; overflow: hidden; position: relative;}
div::after{content: '...'; position: absolute; right: 0; bottom: 0; background-color: #FFF;}
</style>
</head>
<body>
<div>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</body>
</html>


另外，也可以通过一些JS的方式解决，这里不做阐述
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航