css高级应用三种方法实现多行省略的示例代码

div {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

<div class="wrap">内容</div>

.wrap3 {
    position: relative;
    padding-right: 1em;
    /max-height是line-height的几倍，想最多显示多少行就几倍/
    max-height: 3.6em;
    line-height: 1.2em;
    text-align: justify;
    overflow: hidden;
}

.wrap3:before {
    position: absolute;
    right: 0;
    bottom: 0;
    content: '...';
}

<div class="wrap">内容</div>

.wrap {
    position: relative;
    /line-height和height要相互配合，显示多少行就省略，就是line-height多少倍数/
    line-height: 1.2em;
    max-height: 3.6em;
    /此属性看需求来判断是否设置，因为设置了padding-right，多腾出了点位置，该值一般为padding-right的值的负值/
    /margin-left: -1em;/
    /此值写死成1em就好，因为省略号大概就是占用1em的空间/
    padding-right: 1em;
    text-align: justify;
    overflow: hidden;
}

.wrap:before {
    position: absolute;
    right: 0;
    bottom: 0;
    content: '...';
}

.wrap:after {
    position: absolute;
    right: 0;
    /宽高写死1em就好，因为省略号大概就是占用1em的空间，用来遮挡住省略号，也基本上跟wrap的padding-right一致/
    width: 1em;
    /与wrap的行高实际值保持一致/
    height: 1.2em;
    content: '';
    /要跟所在背景颜色一致才能遮挡住省略号后觉得没异样/
    background-color: #fff;
}

<div class="wrap">
    <div class="left">左浮动</div>
    <div class="right1">右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1</div>
    <div class="right2">右浮动2</div>
</div>

.wrap {
	height: 100px;
}
.left {
	float: left;
	width: 60px;
	height: 100%;
	background: pink;
}
.right1 {
	float: right;
	/占满wrap除left剩余宽度/
	width: calc(100% - 60px);
	background: #95d9f8;
}
.right2 {
	float: right;
	background: yellow;
}

<!--把左浮动和右浮动2采用伪类元素替换掉实际标签-->
<div class="wrap">
    <div class="text">右浮动1</div>
</div>

.wrap {
    height: 100px;
    /line-height用来控制最多显示多少行文本/
    line-height: 20px;
    overflow: hidden;
}
.wrap:before {
    float: left;
    /要大于或等于after元素宽度/
    width: 1.5em;
    height: 100%;
    content: '';
}
.text {
    float: right;
    /用负值的marginLeft来避免由before产生的空白空间/
    /因为实际需求上你的父容器里不可能左边是一片空白吧/
    margin-left: -1.5em;
    /既然采用了负值marginLeft，那么文本容器宽度就可以100%占满父容器宽度了/
    width: 100%;
}
.wrap:after {
    float: right;
    /一般三个点就差不多1em宽，用em作单位能自适应字体大小/
    width: 1em;
    content: '...';
}

.wrap:after {
    float: right;
    /因为狼蚁网站SEO优化设置了margin，所以这里的宽度值大小没有要求/
    width: 1em;
    content: '...';
    
    /这两个属性是设置紧挨着.wrap左侧/
    /此值要跟自身宽度一样，取负值/
    margin-left: -1em;
    /此值要跟before宽度一样/
    padding-right: 1.5em;
    
    /这是定位省略号的位置/
    position: relative;
    left: 100%;
    /与父元素wrap的行高实际值一样，取负值/
    : -20px;
}

.wrap {
    /需要定高/
    height: 100px;
    /用来设置显示多少行才省略，值一般为wrap的height值/行数求得，这个行数会受到字体大小的限制/
    /字体太大了，设置显示很多行也会很丑，都挤一块了，所以这个实际值，要看具体需求和实践/
    line-height: 25px;
    /加上此属性显示效果更佳，就算部分浏览器不支持也影响不大/
    text-align: justify;
    overflow: hidden;
}

.wrap:before {
    float: left;
    /这个值可以随意设定，不论单位还是什么/
    width: 1em;
    height: 100%;
    content: '';
}

.wrap:after {
    float: right;
    /大小随意，设置em单位最好，可随字体大小变化而自适应/
    /如果要采用以下渐变效果，那么这个值要大于before里的width值效果会比较好点/
	/值越大，渐变的效果越明显影响的范围越大。/
    width: 2.5em;
    /与父元素wrap的行高实际px值一样/
    height: 25px;
    /此值要跟自身宽度一样，取负值/
    margin-left: -2.5em;
    /此值要跟before宽度一样/
    padding-right: 1em;
    content: '...';
    text-align: right;
    /这里开始利用在float布局的基础上进行定位移动了/
    position: relative;
    /与父元素wrap的行高实际值一样，取负值/
    : -25px;
    left: 100%;
    /设置渐变效果是为了省略号和内容衔接得自然点，没那么突兀，要注意要跟文字所在的背景的颜色搭配（把white替换成背景色）/
    background: #fff;
    background: -webkit-gradient(linear, left , right , from(rgba(255, 255, 255, 0)), to(white), color-s(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

.wrap .text {
    float: right;
    /该值要等于wrap:before的width值/
    margin-left: -1em;
    width: 100%;
}

<div class="wrap">
    <span class="text">
        示例2 散发设解决看手机啦开发交
    </span>
</div>