HTML不换行,多余用省略号代替

2019-11-15 16:01:38来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

HTML不换行,多余用省略号代替

  最主要的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>

  效果图:


原文链接:https://www.cnblogs.com/songtianfa/p/11857672.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HTML连载50-伪元素选择器、清除浮动方式五

下一篇:动画---CSS3 animation