### 字體省略號 ``` .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%; } ```