HTML不換行，多餘用省略號代替

時間 2019-11-16

標籤 html 換行多餘省略號代替欄目 HTML 简体版

原文原文鏈接

　　最主要的css樣式：css

　　white-space: nowrap;html

　　overflow: hidden;spa

　　text-overflow: ellipsis;3d

　　例子：code

 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>