溢位隱藏在前端開發裡是給常見的效果, 不過以前的 css 只能實現1行的文字溢位隱藏
webkit 有個非正式的樣式 -webkit-line-clamp, 可以設定若干行的文字溢位隱藏
雖然是非正式樣式, 但在移動端基本都能相容
-webkit-line-clamp 的使用需要與其它樣式合作, 詳見下 demo
<
!doctype html>
"content-type" content=
"text/html; charset=utf-8"
>
"utf-8"
>
"viewport" content=
"initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
溢位隱藏<
/title>
.box
.box1
.box2
.box3
<
/style>
<
/head>
="box"
>
(原文)
pc端多瀏覽器不相容,用在手機端還是可以接受的.李**表示：「我真的很抱歉讓他們失望，我盡我所能，但我必須承認諶龍打的比我好，他準備的很充分。我今天也打的比倫敦奧運和其他比賽好，但今天不是我的日子，不過我也沒有放棄。我很遺憾，只能第三次獲得銀牌。」
<
/div>
="box box1"
>
(1行溢位)
pc端多瀏覽器不相容,用在手機端還是可以接受的.李**表示：「我真的很抱歉讓他們失望，我盡我所能，但我必須承認諶龍打的比我好，他準備的很充分。我今天也打的比倫敦奧運和其他比賽好，但今天不是我的日子，不過我也沒有放棄。我很遺憾，只能第三次獲得銀牌。」
<
/div>
="box box2"
>
(2行溢位)
pc端多瀏覽器不相容,用在手機端還是可以接受的.李**表示：「我真的很抱歉讓他們失望，我盡我所能，但我必須承認諶龍打的比我好，他準備的很充分。我今天也打的比倫敦奧運和其他比賽好，但今天不是我的日子，不過我也沒有放棄。我很遺憾，只能第三次獲得銀牌。」
<
/div>
="box box3"
>
(3行溢位)
pc端多瀏覽器不相容,用在手機端還是可以接受的.李**表示：「我真的很抱歉讓他們失望，我盡我所能，但我必須承認諶龍打的比我好，他準備的很充分。我今天也打的比倫敦奧運和其他比賽好，但今天不是我的日子，不過我也沒有放棄。我很遺憾，只能第三次獲得銀牌。」
<
/div>
<
/body>
<
/html>
CSS溢位文字隱藏
所謂的介面樣式，就是更改一些使用者操作樣式，比如 更改使用者的滑鼠樣式，表單輪廓等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制，因此我們就放棄了。防止表單域拖拽 設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動...
單行溢位隱藏沒生效 css實現文字溢位隱藏
css實現文字溢位顯示省略號 在做響應式網頁的時候，我們要想在不同尺寸的裝置下保證布局不會錯亂，就需要對文字的長度進行限定。基礎設定 在介紹下面的方法之前，我們先對所有的例子進行基礎的樣式設定 基礎設定 div.box width 100px height 100px border 1px soli...
css實現文字溢位隱藏省略
1.單行文字溢位省略 overflow hidden 超出限定寬度則隱藏超出的內容 white space nowrap 設定文字在一行內顯示，不能換行 text overflow ellipsis 規定當文字溢位時，顯示省略號來代表被修剪的文字2.多行文字溢位省略 overflow hidden ...