css设定文本超出一行或多行就隐藏并显示省略号

来源：互联网发布：c语言如何输出汉字编辑：程序博客网时间：2024/05/18 18:04

这里要说的是文本超出多行才隐藏文字并且显示省略号而不是超出一行就省略。

首先大家要了解一些基本的文本文字属性的设定，例如white-space(超出是否换行)，letter-spacing（字间距），text-overflow（文字超出如何显示），word-wrap（允许长单词或 URL 地址换行到下一行），overflow（超出块范围如何显示）等等...

（1）首先看一下超出一行就隐藏并显示省略的代码：

width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;

都是先规定文本宽度width（或者max-width），然候超出要hidden隐藏，nowarp是不换行属性，ellipsis表示省略号。

（2）对于指定多行文本，超出预期的行数再显示省略号的话，我也百度一下，方案如下：

给标签设定属性,例如span吧:

span{position: relative; max-height: 40px;overflow: hidden;white-space: normal}  span::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;                  background: -webkit-linear-gradient(left, transparent, #fff 55%);                  background: -o-linear-gradient(right, transparent, #fff 55%);                  background: -moz-linear-gradient(right, transparent, #fff 55%);                  background: linear-gradient(to right, transparent, #fff 55%);              }

上述显示两行，超出显示省略号。先声明行高20px，规定最大高度40px（就是显示刚好两行喽），after中的设定是在span这一块最后加一个content，内容是“...”，这种是兼容的办法，不过显示起来会稍稍有点丑。

（3）由于最近在写手机端，涉及到文本超出两行显示省略号，于是乎，一种方法诞生了，直接上代码：

span{      display: block;      font-family: PingFangSC-Regular;          font-size: 14px;          color: #482929;          letter-spacing: 0;          line-height: 20px;  overflow:hidden;          text-overflow:ellipsis;          white-space: normal;          display:-webkit-box;          -webkit-box-orient:vertical;          -webkit-line-clamp:2;/*规定最多显示两行*/  }

注：这个方法适用webkit核浏览器和手机端，效果如下图：

1 0