### 字体省略号 ``` .word_c{ color: #666; font-size: 0.7em; text-indent: 2em; height: 155px; overflow: hidden; position: relative; } .word_c::after { content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding: 0 20px 1px 29px; background:url('../img/ellipsis_bg.png') repeat-y; } ``` ### 第一种 **存在兼容问题** ``` div { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; } ``` ### 第二种 解决 省略号一直存在的问题 ``` .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"> <span class="text"> 示例2： 散发设解决看手机啦开发交 </span> </div> ``` ``` .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%; } ```