多行文字溢出[...]的實現(text-overflow: ellipsis)
阿新 • • 發佈：2017-10-17
overflow psi ref 手冊 rop get red -o doc
聲明：此文章為轉載（點擊查看原文），如有侵權24小時內刪除。聯系QQ：1522025433.
對於單行文字, 很簡單.(詳見css3產考手冊 進入)
css:
.oneLine { width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
對於多行文字, 上面的代碼就不適用了. web-kit based 的瀏覽器提供了對這個特殊需求的支持.
css：
.twoLine { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
你只要調整-webkit-line-clamp的值就能實現在第n行[...].
下面看一個完整實例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>多行文本實現超出...</title> <style type="text/css"> .twoLine { width: 100px; height: 100px; border: 1px solid red; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /*第三行顯示 ...*/ -webkit-box-orient: vertical; } </style> </head> <body> <div class="twoLine">測試文本測試文本測試文本測試文本本測試文本測試文本測試文</div> </body> </html>
谷歌瀏覽器中的效果：
但是：
對於其他內核的瀏覽器就只能用javascript來hack了.
Vimeo的Joe已經實現了這一功能, 可以參考 https://github.com/josephschmitt/Clamp.js 來詳細了解.
多行文字溢出[...]的實現(text-overflow: ellipsis)