html设置文字出现效果,文本溢出显示省略号效果怎么实现？

在HTML页面中经常会遇到文本溢出，需要将超出的部分隐藏并显示省略号的情况，那么这个文本溢出显示省略号效果是怎么实现的呢？下面本篇文章就来给大家介绍一下使用CSS实现文本溢出显示省略号效果的方法，希望对大家有所帮助。

想要实现文本溢出显示省略号效果其实很简单，可以使用text-overflow: ellipsis;和overflow：hidden;并辅助其他的一些CSS样式来完成。overflow：hidden;表示不显示超过对象尺寸的内容，也就是把超出的部分隐藏；text-overflow: ellipsis;表示当文本溢出包含元素时使用省略符号来代表被修剪的文本。

文本溢出显示省略号效果可以分为两种：

●　单行文本溢出显示省略号：这种都应用于标题中，当标题过长，可以将超出部分用省略号(....)来显示。

●　多行文本溢出显示省略号：这种都应用于描述中，当描述内容过多，无法一次全部显示，就可以将超出部分用省略号(....)来显示。

下面我们通过示例来看看实现方法

示例1：单行文本溢出

文本溢出部分显示省略号

* {

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;/* 超出部分显示省略号 */

}

css 实现单行文本超出长度显示省略号

css 实现单行文本超出长度显示省略号

效果图：

说明：

white-space: nowrap;用于指定段落中的文本不进行换行，这样超出的文本就不会在下一行显示。

示例2：多行文本溢出

文本溢出部分显示省略号

* {

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;

}

css 实现多行文本溢出部分显示省略号，css 实现多行文本溢出部分显示省略号，

css 实现多行文本溢出部分显示省略号

效果图：

说明：

-webkit-line-clamp用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(unsupported WebKit property)，它没有出现在 CSS 规范草案中；

display: -webkit-box 将对象作为弹性伸缩盒子模型显示 ；

-webkit-box-orient设置或检索伸缩盒对象的子元素的排列方式 ；