如何让单行文本以及多行文本溢出显示省略号(…)

1）单行文本溢出显示省略号

1、overflow:hidden; （顾名思义超出限定的宽度就隐藏内容）

2、white-space: nowrap; （设置文字在一行显示不能换行）

3、text-overflow: ellipsis;（规定当文本溢出时显示省略符号来代表被修剪的文本）

我们具体的代码效果演示就如下图所示：（设置ul宽度为300，超出的文字内容让其自动隐藏并显示...）

 

 

2）多行文本溢出显示省略号

我们在编写网页代码时，有时候新闻列表页中新闻简介可能有一行或者多行，我们要如何处理这种问题，让其超出多行后还能显示省略号呢，不要慌，我们css还是很强大的，已经给我们提供了方法来处理这种问题了。

核心css语句：

1、-webkit-line-clamp:2; （用来限制在一个块元素显示的文本的行数,2表示最多显示2行。 为了实现该效果，它需要组合其他的WebKit属性）

2、display: -webkit-box; （和1结合使用，将对象作为弹性伸缩盒子模型显示 ）

3、-webkit-box-orient:vertical;（ 和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 。）

4、overflow:hidden; （顾名思义超出限定的宽度就隐藏内容）

5、text-overflow: ellipsis;（规定当文本溢出时显示省略符号来代表被修剪的文本）

我们具体的代码效果演示就如下图所示：（设置段落p宽度为300，超出2行的文字内容让其自动隐藏并显示...）