word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 對象作為伸縮盒子模型顯示 **/ -webkit-box-orient: vertical; /** 設置或檢索伸縮盒對象的子元素的排列方式 ...
.p display: webkit box overflow: hidden webkit box orient: vertical text overflow: ellipsis webkit line clamp: ...
2019-11-29 11:49 0 559 推薦指數:
word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 對象作為伸縮盒子模型顯示 **/ -webkit-box-orient: vertical; /** 設置或檢索伸縮盒對象的子元素的排列方式 ...
做這個省略的問題,突然發現顯示省略號是有中英文區分的 我做兩行的時候用的是以下代碼,在是中文的情況下是么得問題,到了英文下發現不起作用了 原來是得加上 word-break: break-all; 加上這個的話 在中英文下都可以正常使用 注意:只兼容 Chrome內核 ...
效果圖: 注意點:看代碼有webkit自然也就chrome支持好,其他瀏覽器就。。嘖嘖嘖 ...
頁面內容 js部分 css部分 ...
超出顯示省略號 overflow: hidden;white-space: nowrap;text-overflow: ellipsis; 兩行之后超出顯示省略號 text-overflow: -o-ellipsis-lastline; overflow: hidden ...
最近接到一個需求,要求商場導航里的文字最多顯示兩行,超出兩行的省略號顯示,查一些資料,又根據自己的需求,改了很多,直接上代碼吧 <html> <head> <style type="text/css"> ...