HTML技巧篇：如何让单行文本以及多行文本溢出时显示省略号(…)

参考：https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc

本篇文章主要给你们介绍一下在html页面中如何让单行文本以及多行文本溢出显示省略号(…)。

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

当咱们在编写网页代码的时候，确定会遇到过文字列表中的文字太多超出了咱们所写的宽度，致使文本换行或者文本超出了界限，这时有人就会说了，让后台限制一下调用的文字个数不就好了吗，可是咱们在作响应式的时候因为是百分比布局，没法计算一行会显示多少个文字，因此这并非一个好的解决方案，咱们使用css3就能够轻松的实现，并且简单好用。

核心css语句：

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

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

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

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

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

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

核心css语句：

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

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

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

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

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

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

好了，本篇文章就给你们说到这里，你们本身下来能够本身找例子写一下试一试到底能不能实现咱们所说的效果，之后在写页面的的遇到这种问题的时候直接复制使用便可。

每日金句：必须从过去的错误学习教训而非依赖过去的成功。喜欢个人文章的小伙伴记得关注一下哦，天天将为你更新最新知识。