HTML技巧篇：溢出一行文本和多行文本并显示省略号(…)的方法
本文主要介绍如何在html页面上溢出一行文本和多行文本并显示省略号(…)。
1 )单行文本溢出显示省略号
写web代码时，您可能遇到过字符列表中的字符超过我们写的宽度，导致文本换行，或者文本超出极限的情况。 那时，就像有人说的那样，限制在后台调用的字符数不就行了吗？ 但是，构建响应式时，由于是百分比配置，所以无法计算每行显示多少个字符。 这不是一个好的解决方案。 使用css3可以很容易地实现，也很容易使用
核心css语句：
1、overflow :隐藏； (顾名思义，如果超过限定的宽度，就隐藏内容)
2、空白：nowrap； (将字符设置为不能换行到一行)
3、文本覆盖： ellipsis； (规定文本溢出时，显示表示裁剪文本的省略号。)
具体的代码效果演示如下图所示。
2 )多行文本溢出显示省略号
我们写网页代码时，新闻列表页面上可能会有一行或多行新闻概要。 我们怎么处理这个问题？ 是否希望即使超过多行也显示省略号？ 请不要慌张。 我们css还很强大，为我们提供了处理这个问题的方法。
核心css语句：
1、-webkit-line-clamp:2； 用于限制在单个块元素中显示的文本行数。 2最多表示两行。 为了实现这个效果，需要组合其他WebKit属性。)
2、display: -webkit-box； (与1组合，将对象显示为弹性拉伸箱模型)。
3、- WebKit-box-orient : vertical； (与1组合，设置或搜索伸缩框对象的子元素的放置方式。 ）
4、overflow :隐藏； (顾名思义，如果超过限定的宽度，就隐藏内容)
5、文本覆盖： ellipsis； (规定文本溢出时，显示表示裁剪文本的省略号。)
具体的代码效果演示如下图所示。
文章复制百家号/ssdbmh学前端