[CSS]多行略縮語方式

有關網頁及相關語法的討論

[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-css-solution-for-multiline-text-truncation/

以下語法使用 -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
 
文章: 1257
註冊時間: 2008年 11月 26日, 00:49

回到 html/javascript/asp/php

誰在線上

正在瀏覽這個版面的使用者:沒有註冊會員 和 1 位訪客

cron