css怎么实现文本单行超出和多行超出省略号 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要介绍css怎么实现文本单行超出和多行超出省略号,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

<强>首先我们来看一看css实现单行文本超出省略号的方法。

css实现单行文本的溢出显示省略号应该用<强>文本溢出:省略属性强来,当然还需要加宽度属宽度来兼容部分浏览。

<强> css单行文本超出省略号的实现代码:

& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=utf-8"比; 　　& lt; title>省略号test 　　& lt;风格类型=拔谋?css"比; 　　* { 　　保证金:0; 　　填充:0; 　　} 　　身体{ 　　填充:10 px; 　　字体类型:Arial; 　　} 　　#{测试　　位置:相对; 　　宽度:150 px; 　　高度:20 px; 　　行高:20 px; 　　文本溢出:省略; 　　空白:nowrap;} 　　*白色空间:nowrap;} 　　溢出:隐藏; 　　边界:1 px固体# 999; 　　} 　　#测试跨{ 　　位置:绝对的; 　　上图:0; 　　右:0; 　　显示:块; 　　浮:左; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div id=皌est"祝辞& lt;/div> 　　& lt;/body> 　　& lt;/html>

文本溢出:省略属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢?下面我们就继续说<强> css实现多行文本超出省略号强的方法。(文本溢出:省略属性更多内容可参考css手册)

<强> 1,css实现多行文本超出省略号之直接用css属性设置(只有webkit内核才有作用)

语法:

溢出:隐藏; 　　文本溢出:省略; 　　显示:-webkit-box; 　　-webkit-line-clamp: 2; 　　-webkit-box-orient:垂直的;

移动端浏览器绝大部分是WebKit内核的,所以该方法适用于移动端;

-webkit-line-clamp用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(不支持的WebKit属性),它没有出现在CSS规范草案中。

显示:-webkit-box将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient设置或检索伸缩盒对象的子元素的排列方式。

文本溢出:省略号以用来多行文本的情况下,用省略号”…“隐藏超出范围的文本。

<强> 2,CSS实现多行文本超出省略号之利用绝对定位和填充;(跨浏览器解决方案)

语法:

p { 　　位置:相对; 　　行高:20 px; 　　max-height: 40像素; 　　溢出:隐藏; 　　} 　　p::{后　　内容:“……“ 　　位置:绝对的; 　　底部:0; 　　右:0; 　　padding-left: 40像素; 　　背景:-webkit-linear-gradient(左、透明、# fff 55%); 　　背景:-o-linear-gradient(透明,# fff 55%); 　　背景:-moz-linear-gradient(透明,# fff 55%); 　　背景:线性渐变(向右、透明、# fff 55%); 　　}

这个方法的原理是:首先在包含文字的元素里,嵌入一个& lt; span>……& lt;/span>,然后包含文字的元素右侧留出…的位置(padding-right),最后利用绝对定位将……定位至右侧的padding-right区域。<强>
强说明:该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注意:

将高度设置为行高的整数倍,防止超出的文字露出。

给p::后添加渐变背景可避免文字只显示一半。

由于ie6-7不显示内容内容,所以要添加标签兼容ie6-7(如:& lt; span>…& lt;跨度/祝辞);兼容ie8需要将::后替换成:。

以上是css怎么实现文本单行超出和多行超出省略号的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!