超出部分隐藏（以省略号显示）-洋葱先生-杨少通

洋葱先生-杨少通感谢您的到来

超出部分隐藏，以省略号的方式显示。

方法一、只适用于单行（以下代码缺一不可）

       overflow:hidden;

       text-overflow:ellipsis;/*超出部分省略号代替*/

       white-space:nowrap;/*强制不换行*/

效果图：

dome1.png

方法二、适用于多行（以下代码缺一不可）

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

       -webkit-box-orient:vertical;/*设置或检索伸缩盒对象的子元素的排列方式*/ 

       -webkit-line-clamp:2;  /*限制在一个块元素显示的文本的行数*/

       overflow:hidden;

效果图：

dome2.png

方法三、适用于单、多行（原理如下，代码可随意修改。注意：文字未超出行也会有省略号，需结合js调整）

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, #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%); }
效果图：

dome3.png

以上就是本人针对该问题的个人理解，希望对你们有所帮助。感谢！

实例中代码均为原创，存在不足还请见谅！

如有转载请注明来源： www.dreamload.cn/blog/?p=596&preview=true （洋葱先生-杨少通）