在HTML页面中经常会遇到文本溢出，需要将超出的部分隐藏并显示省略号的情况，那么这个文本溢出显示省略号效果是怎么实现的呢？下面本篇文章就来给大家介绍一下使用CSS实现文本溢出显示省略号效果的方法，希望对大家有所帮助。
想要实现文本溢出显示省略号效果其实很简单，可以使用text-overflow: ellipsis;和overflow：hidden;并辅助其他的一些CSS样式来完成。overflow：hidden;表示不显示超过对象尺寸的内容，也就是把超出的部分隐藏；text-overflow: ellipsis;表示当文本溢出包含元素时使用省略符号来代表被修剪的文本。
文本溢出显示省略号效果可以分为两种：
● 单行文本溢出显示省略号：这种都应用于标题中，当标题过长，可以将超出部分用省略号(....)来显示。
● 多行文本溢出显示省略号：这种都应用于描述中，当描述内容过多，无法一次全部显示，就可以将超出部分用省略号(....)来显示。
下面我们通过示例来看看实现方法
示例1：单行文本溢出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本溢出部分显示省略号</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 300px;/*指定宽度*/
height: 100px;
margin: 50px auto;
padding: 10px 0px;
border: 1px dashed palevioletred;
}
h2 {
overflow: hidden;/*超出部分隐藏*/
white-space: nowrap;/*规定段落中的文本不进行换行 */
text-overflow: ellipsis;/* 超出部分显示省略号 */
-o-text-overflow: ellipsis;/* 超出部分显示省略号 */
}
h3 {
overflow: hidden;/*超出部分隐藏*/
white-space: nowrap;/*规定段落中的文本不进行换行 */
text-overflow: ellipsis;/* 超出部分显示省略号 */
-o-text-overflow: ellipsis;/* 超出部分显示省略号 */
}
</style>
</head>
<body>
<div class="box">
<h2>css 实现单行文本超出长度显示省略号</h2><br />
<h3> css 实现单行文本超出长度显示省略号</h3>
</div>
</body>
</html>
效果图：
说明：
white-space: nowrap;用于指定段落中的文本不进行换行，这样超出的文本就不会在下一行显示。
示例2：多行文本溢出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本溢出部分显示省略号</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box{
width: 280px;
height: 70px;
margin: 50px auto;
font-size: 20px;
border: 1px dashed palevioletred;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="box">
css 实现多行文本溢出部分显示省略号，css 实现多行文本溢出部分显示省略号，
css 实现多行文本溢出部分显示省略号
</div>
</body>
</html>
效果图：
说明：
-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中；
display: -webkit-box 将对象作为弹性伸缩盒子模型显示 ；
-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 ；
网友评论