css怎么实现单行文本超出省略号

   

   

    css单行文本超出省略号的效果如下：

    2345截图20180919100533.png

    text-overflow:ellipsis属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢？下面我们就继续说css实现多行文本超出省略号的方法。（text-overflow:ellipsis属性更多内容可参考css手册）

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

    语法：

    overflow:hidden;

    text-overflow:ellipsis;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

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

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

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

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

    text-overflow:ellipsis以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

    2、css实现多行文本超出省略号之利用绝对定位和padding;(跨浏览器解决方案)

    语法：

    p{

    position:relative;

    line-height:20px;

    max-height:40px;

    overflow:hidden;

    }

    p::after{

    content:"...";

    position:absolute;

    bottom:0;

    right:0;

    padding-left:40px;

    background:-webkit-linear-gradient(left,transparent,#fff55%);

    background:-o-linear-gradient(right,transparent,#fff55%);

    background:-moz-linear-gradient(right,transparent,#fff55%);

    background:linear-gradient(toright,transparent,#fff55%);

    }

    这个方法的原理是：首先在包含文字的元素里，嵌入一个...，然后包含文字的元素右侧留出...的位置(padding-right),最后利用绝对定位将...定位至右侧的padding-right区域。

    说明：该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

    注意：

    将height设置为line-height的整数倍，防止超出的文字露出。

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

    由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：…）；兼容ie8需要将::after替换成:after。

到此，关于“css怎么实现单行文本超出省略号”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

当前文章：css怎么实现单行文本超出省略号
文章起源：http://kswjz.com/article/jgdjig.html