zoukankan      html  css  js  c++  java
  • 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>

      效果图:

  • 相关阅读:
    安装maven报错及解决
    Servlet包导入
    理解SQL SERVER的逻辑读,预读和物理读以及索引
    第六章(函数)编程题二
    第六章(函数)编程题一
    第五章(使用对象) 编程题一
    第三章(循环) 编程题 4
    第四章(数组) 编程题 1
    第三章(循环) 编程题 3
    低功耗蓝牙 ATT/GATT/Service/Characteristic 规格解读
  • 原文地址:https://www.cnblogs.com/songtianfa/p/11857672.html
Copyright © 2011-2022 走看看