怎么在css中实现多行省略

本篇文章给大家分享的是有关怎么在css中实现多行省略，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

10年积累的成都做网站、成都网站建设、成都外贸网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有吴川免费网站建设让你可以放心的选择与我们合作。

使用-webkit-line-clamp

对多行文本的容器应用如下样式

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

除了 -webkit-line-clamp 其他属性固定不变，主要是将对象作为弹性伸缩盒子模型显示，并设置伸缩盒对象的子元素的排列方式。

而 -webkit-line-clamp 是用来控制多少行进行省略

优点：

浏览器原生支持的省略行为，样式看起来很舒服
简单方便使用

缺点：

看属性的前缀就知道，这是 webkit 内核的浏览器支持的，兼容性不是广泛。

使用场景

如果你只针对webkit内核浏览器或者移动端（移动端浏览器多数是webkit内核），那么使用该方案是最好的了。

利用绝对定位

这个方案其实很好理解的，首先我们对于一个装内容的容器右边预留一个空间用来放省略号，用 padding-right: 1em; 来预留空间，为啥是1em呢，一个省略号差不多就是1em啦，用em单位是为了响应字体大小。

用绝对定位把省略号定位在这个预留的空间右下角。

html

内容

css

.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: '...';
}

效果（多内容时）：

怎么在css中实现多行省略

这样的话，省略号永远都会存在的。所以要解决这个问题，我们用一个跟背景颜色一样的方块遮住省略号，那么关键点就是，怎么知道何时要遮住，何时不遮住呢？

思路：用于挡住省略号的方块也是绝对定位，靠右定为， right: 0 ，但是 bottom 值就不要设置了，如果不设置的话，该方块会跟着文本内容的实际高度移动，而不是 max-height 的高度。这样的话，当不需要省略时（即不超过 max-height ）时，就刚好是 bottom: 0 的情况，就会挡住省略号。当要进行省略时（即超过 max-height ）就会挡不住省略号了，它自己也会被 overflow: hidden 给隐藏掉了。

所以最终方案是：

html

内容

css

.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;
}

效果：

怎么在css中实现多行省略

优点

兼容性好，各大浏览器支持
自适应高度，不用写死高度，设定超过多少行才需要进行省略显示
自适应宽度
自适应字体大小，字体大小不会影响到原本的需求，即要求多少行省略就多少行才省略

缺点

文字右边会故意留空一些位置给省略号放置
需要考虑所在的背景颜色，因为after伪类要用背景颜色来遮挡住省略号

利用float布局

这个方案对于基础知识不扎实的童鞋们，可能不太好理解，如果仅是想找个解决方案不想知道原理的话，可以直接去里看

在说该方案之前，要先理解这么一个现象：

有这么一段html


    左浮动

.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; }

.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%; }

重庆分公司，新征程启航

怎么在css中实现多行省略

其他资讯