最主要的css樣式： white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 例子： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> ...
最主要的css樣式：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{margin:0;padding:0;} 8 .page_right_bot{ 9 width:165px; 10 height:128px; 11 border: 1px solid red; 12 overflow:hidden; 13 } 14 .page_right_bot ul li{ 15 height:25px; 16 line-height:25px; 17 cursor: pointer; 18 word-break:keep-all;/* 不換行 */ 19 white-space:nowrap;/* 不換行 */ 20 overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */ 21 text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用。*/ 22 } 23 </style> 24 </head> 25 <body> 26 <div class="page_right_bot"> 27 <ul> 28 <li>威潔士汽車美容加盟 業內的佼佼者</li> 29 <li>一點點奶茶加盟店 打造茶飲極致誘惑</li> 30 <li>威潔士汽車美容加盟 業內的佼佼者</li> 31 <li>一點點奶茶加盟店 打造茶飲極致誘惑</li> 32 <li>車奇士汽車快修加盟 80後創業輕鬆</li> 33 <li>雅芳護膚品加盟 非常有發展前</li> 34 <li>順暢衣櫃加盟選擇歐蒂尼，創富新項目</li> 35 <li>景克麗緹娜美容院加盟 書寫財富新篇章</li> 36 <li>威潔士汽車美容加盟 業內的佼佼者</li> 37 <li>加盟馳易佳換油中心 讓你輕鬆當老闆</li> 38 </ul> 39 </div> 40 </body> 41 </html>
效果圖：
