css设定文本超出一行或多行就隐藏并显示省略号
2017-03-02 12:36
696 查看
这里要说的是文本超出多行才隐藏文字并且显示省略号而不是超出一行就省略。
首先大家要了解一些基本的文本文字属性的设定,例如white-space(超出是否换行),letter-spacing(字间距),text-overflow(文字超出如何显示),word-wrap(允许长单词或
URL 地址换行到下一行),overflow(超出块范围如何 显示)等等...
(1)首先看一下超出一行就隐藏并显示省略的代码:
(2)对于指定多行文本,超出预期的行数再显示省略号的话,我也百度一下,方案如下:
给标签设定属性,例如span吧:
(3)由于最近在写手机端,涉及到文本超出两行显示省略号,于是乎,一种方法诞生了,直接上代码:
首先大家要了解一些基本的文本文字属性的设定,例如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核浏览器和手机端,效果如下图:
相关文章推荐
- CSS控制文本超出部分显示省略号(一行跟多行)
- CSS实现单行、多行文本溢出显示省略号。 超出隐藏,不换行 ....
- CSS文本超出2行就隐藏并且显示省略号,单行居中,两行居左
- 设置多行文本超出显示省略号,在手机端超出部分无法隐藏解决方法
- css 文本超出2行就隐藏并且显示省略号
- CSS文本超出2行就隐藏并且显示省略号
- CSS- 文本超出指定宽度后隐藏并显示为省略号
- css超出一行省略号:text-overflow和white-space超出隐藏显示省略号
- css 文本超出隐藏并且显示省略号
- css 文本超出2行就隐藏并且显示省略号
- css 文本超出2行就隐藏并且显示省略号
- 超出文本显示省略号(包括一行和多行)
- 超出多行文本隐藏,显示省略号
- CSS让文本只显示一行,超出部分隐藏或以三个点结束
- css 文本超出2行就隐藏并且显示省略号(适用于Chrome)
- CSS 文本超出指定宽度后隐藏并显示为省略号鼠标移上显示全文
- css 文本超出2行就隐藏并且显示省略号
- 单行文本与多行文本超出范围需要隐藏并显示省略号
- css 文本超出就隐藏并且显示省略号
- css 文本超出2行就隐藏并且显示省略号