Html中文字單行超出和多行超出顯示省略號

2022-09-17 23:21:18 字數 648 閱讀 8247

/*

單行文字的溢位顯示省略號

*/width: 200px;

overflow:hidden;

text-overflow:ellipsis;

white-space: nowrap;

/*加寬度width屬來相容部分瀏覽器

*/

/*

多行文字溢位顯示省略號

*/width: 220px;

height: 58px;

overflow:hidden;

text-overflow:ellipsis;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

/*-webkit-line-clamp用來限制在乙個塊元素顯示的文字的行數。 為了實現該效果,它需要組合其他的webkit屬性。常見結合屬性:

display: -webkit-box; 必須結合的屬性 ,將物件作為彈性伸縮盒子模型顯示 。

-webkit-box-orient 必須結合的屬性 ,設定或檢索伸縮盒物件的子元素的排列方式 。

*/

文字超出擷取(單行 多行)

width 100px overflow hidden white space nowrap text overflow ellipsis width 100px overflow hidden display webkit box webkit box orient vertical webkit...

css 單行文字和多行文字超出顯示省略號

單行文字超出顯示省略號 white space nowrap 文字強制不換行 text overflow ellipsis 文字溢位顯示省略號 overflow hidden 溢位的部分隱藏 多行文字超出顯示省略號 overflow hidden webkit line clamp 2 超出兩行 t...

關於單行 多行文字超出顯示省略號 css

對於單行文字溢位問題 p 對於多行文字 段落 溢位問題 思路 在段落最後用.模擬省略號 html 十萬個為什麼 是少年兒童出版社在20世紀60年代初編輯出版的一套青少年科普讀物。50年來,這套書先後出版了6個版本,累計發行量超過1億冊,是新中國幾代青少年的科學啟蒙讀物,已經成為中國原創科普圖書的第一...