CSS div內文字顯示兩行,超出部分省略號顯示
阿新 • • 發佈:2019-02-22
ast div psi 搜狗 color pre 單行 bsp 部分
1. 概述
1.1 說明
在項目過程中,有時候需要控制div內文字最多顯示兩行,超出的使用省略號進行處理。使用識別碼/前綴-webkit進行處理可直接得到相應效果。
1.1 -webkit
WebKit內核的css前綴為“-webkit-”,Comodo Drangon(科摩多龍),蘋果,安卓,搜狗高速瀏覽器3,快快瀏覽器,楓樹瀏覽器,雲遊瀏覽器,360極速瀏覽器,世界之窗極速版,SRWare Iron,獵豹瀏覽器,RockMelt,QQ瀏覽器都可識別。
備註:IOS版的微信、android版本的X5內核,都是采用webkit內核。
2. 代碼
2.1 代碼示例
-
text-overflow屬性規定當文本溢出包含元素時發生的事情
- ellipsis 顯示省略符號來代表被修剪的文本(單行溢出)
- clip 修剪文本
- string 使用給定的字符串來代表被修剪的文本
- -o-ellipsis-lastline 從 Opera 10.60 開始有此值,但不在標準之內
-
-webkit-line-clamp WebKit支持,不在標準之內(ie和火狐不兼容)
.fontClass { color: #333; font-size: 28rpx; line-height: 40rpx; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
CSS div內文字顯示兩行,超出部分省略號顯示