CSS单行省略和多行省略方法

标签：die   content   -o   otto   box   ica   port   元素   pos   

单行显示省略css样式：
　　overflow: hidden;
　　white-space: nowrap;
　　text-overflow: ellipsis;

多行省略：

　　方法一、
　　intwoline1 {
　　　　display: block;
　　　　display: -webkit-box;
　　　　max-width: 400px;
　　　　height: 109.2px;
　　　　margin: 0 auto;
　　　　font-size: 26px;
　　　　line-height: 1.4;
　　　　-webkit-line-clamp: 3;
　　　　-webkit-box-orient: vertical;
　　　　overflow: hidden;
　　　　text-overflow: ellipsis;
　　}

　　方法二、

　　intwoline2{
　　　　display:-webkit-box !important;
　　　　overflow:hidden;
　　　　text-overflow:ellipsis;
　　　　word-break:break-all;
　　　　-webkit-box-orient:vertical;
　　　　-webkit-line-clamp:2;
　　}

　　方法三、使用伪元素加绝对定位
　　p {
　　　　position:relative;
　　　　line-height:20px;
　　　　max-height:40px;
　　　　overflow:hidden;
　　}
　　p::after {
　　　　content: "\02026";
　　　　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%);
　　}

CSS单行省略和多行省略方法

标签：die   content   -o   otto   box   ica   port   元素   pos   

原文地址：https://www.cnblogs.com/CCLlog/p/8876181.html