css實現多行文字超出省略號顯示,相容所有瀏覽器
阿新 • • 發佈:2018-11-13
原文連結:https://github.com/happylindz/blog/issues/12
float 特性實現多行文字截斷
基本原理
有個三個盒子 div,粉色盒子左浮動,淺藍色盒子和黃色盒子右浮動,
- 當淺藍色盒子的高度低於粉色盒子,黃色盒子仍會處於淺藍色盒子右下方。
- 如果淺藍色盒子文字過多,高度超過了粉色盒子,則黃色盒子不會停留在右下方,而是掉到了粉色盒子下。
好了,這樣兩種狀態的兩種展示形式已經區分開了,那麼我們可以將黃色盒子進行相對定位,將內容溢位的黃色盒子移動到文字內容右下角,而未溢位的則會被移到外太空去了,只要我們使用 overflow: hidden 就可以隱藏掉。
基本原理就是這樣,我們可以將淺藍色區域想象成標題,黃色區域想象為省略號效果。那麼你可能會覺得粉色盒子佔了空間,那豈不是標題會整體延後了嗎,這裡可以通過 margin 的負值來出來,設定淺藍色盒子的 margin-left 的負值與粉色盒子的寬度相同,標題也能正常顯示。
那麼我們將前面的 DOM 結構簡化下,變成下面這樣:
<div class="wrap"> <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.</div> </div>
剛才的粉色盒子和黃色盒子都可以用偽元素來代替。
.wrap { height: 40px; line-height: 20px; overflow: hidden; } .wrap .text { float: right; margin-left: -5px; width: 100%; word-break: break-all; } .wrap::before { float: left; width: 5px; content: ''; height: 40px; } .wrap::after { float: right; content: "..."; height: 20px; line-height: 20px; /* 為三個省略號的寬度 */ width: 3em; /* 使盒子不佔位置 */ margin-left: -3em; /* 移動省略號位置 */ position: relative; left: 100%; top: -20px; padding-right: 5px; }
實現效果:demo 地址
這裡我目前看到最巧妙的方式了。只需要支援 CSS 2.1 的特性就可以了,它的優點有:
- 相容性好,對各大主流瀏覽器有好的支援
- 響應式截斷,根據不同寬度做出調整
- 文字超出範圍才顯示省略號,否則不顯示省略號
至於缺點,因為我們是模擬省略號,所以顯示位置有時候沒辦法剛剛好,所以可以考慮: - 加一個漸變效果,貼合文字,就像上述 demo 效果一樣
- 新增 word-break: break-all; 使一個單詞能夠在換行時進行拆分,這樣文字和省略號貼合效果更佳。