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;
    /*因为下面设置了margin，所以这里的宽度值大小没有要求*/
    width: 1em;
    content: '...';
    
    /*这两个属性是设置紧挨着.wrap左侧*/
    /*此值要跟自身宽度一样，取负值*/
    margin-left: -1em;
    /*此值要跟before宽度一样*/
    padding-right: 1.5em;
    
    /*这是定位省略号的位置*/
    position: relative;
    left: 100%;
    /*与父元素wrap的行高实际值一样，取负值*/
    top: -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的行高实际值一样，取负值*/
    top: -25px;
    left: 100%;
    /*设置渐变效果是为了省略号和内容衔接得自然点，没那么突兀，要注意要跟文字所在的背景的颜色搭配（把white替换成背景色）*/
    background: #fff;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(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>