单行

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; 

多行(兼容各个浏览器)//通过覆盖最后几个字的形式

p{
position:relative;
line-height:1.4em;
height:4.2em;/* 3 倍line-height  多少倍就是多少行*/
overflow:hidden;
}
.p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
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%);
}

效果如下

总结

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Canvas实现生成电子签名并可PDF保存的思路和方法是什么

  这篇文章主要介绍了Html5基于canvas实现电子签名并生成PDF文档,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS中line-height属性的使用有何影响，哪些事项要注意

  css line-height属性：1、css line-height属性会影响行框的布局，用于设定行与行之间的距离(行高)，不允许使用负值。2、当应用于块级元素时，它定义了基线之间的最小距离，而非最大距离。

• CSS布局中有哪些错误和细节要注意的

  很多人都是边干边学习CSS的，因为css不像C#之类的语言那么复杂，但就是因为看起来简单因为导致很多人对css不理解，在css的布局中会出现很多小错误，那么下面就让小编为大家总结CSS布局中常见的错误。​​​​​​​

• 用CSS3怎样做动态渐变背景，方法是什么？

  这篇文章给大家分享的是用CSS3实现动态渐变背景的示例。对于渐变效果的实现大家应该都比较熟悉，那么如果是动态变化的渐变效果该如何做呢？实现代码及效果如下，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• 在CSS3中default伪类选择器作用和用法是什么

  CSS3 :default 伪类选择器只能作用在表单元素上，表示默认状态的表单元素。接下来通过本文给大家介绍CSS3 :default伪类选择器使用简介，感兴趣的朋友跟随脚本之家小编一起看看吧