[CSS]多行略縮語方式

有關網頁及相關語法的討論
回覆文章
頭像
tim
文章: 1300
註冊時間: 2008年 11月 26日, 00:49

[CSS]多行略縮語方式

文章 tim » 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 不支援

代碼: 選擇全部

<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>

多多留言, 整理文章, 把經驗累積下來.....

頭像
tim
文章: 1300
註冊時間: 2008年 11月 26日, 00:49

Re: [CSS]多行略縮語方式

文章 tim » 2020年 2月 21日, 14:34

根據 can i use 支援性, 目前幾乎已都支援了, 可以放心使用:

https://caniuse.com/#feat=css-line-clamp
多多留言, 整理文章, 把經驗累積下來.....

回覆文章