[CSS]多行略縮語方式
發表於 : 2017年 1月 26日, 14:48
CSS 限制文本的行数 —— -webkit-line-clamp 简介
https://icewing.cc/webkit-line-clamp.html
Line Clampin’ (Truncating Multiple Line Text)
https://css-tricks.com/line-clampin/
Pure CSS for multiline truncation with ellipsis
http://hackingui.com/front-end/a-pure-c ... runcation/
以下語法使用 -webkit-line-clam 但 firefox 與 ie 不支援
https://icewing.cc/webkit-line-clamp.html
Line Clampin’ (Truncating Multiple Line Text)
https://css-tricks.com/line-clampin/
Pure CSS for multiline truncation with ellipsis
http://hackingui.com/front-end/a-pure-c ... runcation/
以下語法使用 -webkit-line-clam 但 firefox 與 ie 不支援
代碼: 選擇全部
<style>
.module {
width: 250px;
overflow: hidden;
}
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
<div class="module line-clamp" >
再對能是面關動但史花又國體共物了、法東把叫作，盡基和費於記也職；不布直生表動。
</div>