1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > css实现单行 多行超出显示省略号兼容火狐

css实现单行 多行超出显示省略号兼容火狐

时间:2019-12-22 13:43:50

相关推荐

css实现单行 多行超出显示省略号兼容火狐

css 单行,超出部分显示省略号

p{overflow:hidden;//超出部分隐藏text-overflow:ellipsis;//超出部分显示省略号white-space:nowarp;//不允许折行}

补充:white-space,它主要是用来处理元素内文本的空白符、换行符以及是否允许折行。可选值包括normal(默认)、pre、nowrap、pre-wrap、pre-line。

word-wrap,是用来标明是否允许浏览器在单词内进行断句,为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。可选值break-word

word-break,用来标明怎样进行单词内的断句。默认值normal,可选值为break-all,keep-all。

css多行文本超出显示省略号

p{overflow:hidden;//超出部分隐藏text-overflow:ellipsis;//超出部分显示省略号display:-webkit-box;//将对象作为弹性伸缩盒子模型显示-webkit-box-orient:vertical;//规定框的子元素应该被水平或垂直排列-webkit-box-clamp:2//为不规范属性,表示展示几行}

所以在火狐上,-webkit-box-clamp:2不生效

火狐上多行文本超出显示省略号

首先如果想让样式代码只在火狐上生效

@-moz-documentc url-prefix(){p{position: relative; line-height: 20px;max-height: 40px;//设置最大高度,加上overflowhidden,正好是两行,使超出部分隐藏overflow: hidden;}p::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%);//背景色可写成渐变也可写成一样的颜色}}

原理是自己写一个… 放在最后一行的末尾。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。