最主要的css样式：

　　white-space: nowrap;

　　overflow: hidden;

　　text-overflow: ellipsis;

　　例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

     *{margin:0;padding:0;}

     .page_right_bot{

      width:165px;

      height:128px;

      border: 1px solid red;

      overflow:hidden;

      }

     .page_right_bot ul li{

          height:25px;

          line-height:25px;

          cursor: pointer;

          word-break:keep-all;/* 不换行 */

         white-space:nowrap;/* 不换行 */

         overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */

         text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/

     }

     </style>

 </head>

 <body>

     <div class="page_right_bot">

           <ul>

               <li>威洁士汽车美容加盟 业内的佼佼者</li>

               <li>一点点奶茶加盟店 打造茶饮极致诱惑</li>

               <li>威洁士汽车美容加盟 业内的佼佼者</li>

               <li>一点点奶茶加盟店 打造茶饮极致诱惑</li>

               <li>车奇士汽车快修加盟 80后创业轻松</li>

               <li>雅芳护肤品加盟 非常有发展前</li>

               <li>顺畅衣柜加盟选择欧蒂尼，创富新项目</li>

               <li>景克丽缇娜美容院加盟 书写财富新篇章</li>

               <li>威洁士汽车美容加盟 业内的佼佼者</li>

               <li>加盟驰易佳换油中心 让你轻松当老板</li>

           </ul>

    </div>

 </body>

 </html>

　　效果图：

HTML不换行，多余用省略号代替的更多相关文章

  1. CSS多余文本省略号显示

    CSS多余文本省略号显示 本次案例代码是在 elementui 当中的 table 组件中实际需求 当然使用的是纯 CSS3 代码,所以原生支持度高,兼容性高,所以可多场景应用 对于过长文本进行单行省 ...

  2. 转css中文英文换行、禁止换行、显示省略号

    css中文英文换行.禁止换行.显示省略号 原创 2016年08月09日 14:20:01   word-break:break-all;只对英文起作用,以字母作为换行依据 word-wrap:brea ...

  3. GridView 多余字符显示省略号，并在Tooltip中显示完整信息

    效果 方法一:TemplateField 关键点 TemplateField的灵活性 CSS:overflow:hidden;text-overflow:ellipsis (溢出时隐藏;文本溢出时省略 ...

  4. css中多余文字省略号显示

    项目中很多情况都要求多余的文字要以省略号的形式展示在前端页面上.虽然用的多,但是我也不知道为啥,我始终记不住.所以,通过这种方式,让自己加深一下印象 情况一:单行文字超出规定宽度后,以省略号形式展示 ...

  5. CSS控制TD内的文本超出指定宽度后不换行而用省略号代替

    <style type="text/css"> .lineOverflow { width: 100px; border:#000 solid 1px; text-ov ...

  6. 表格td标签在不添加多余标签的情况下实现文本内容单行显示，多余部分省略号表示的方法

    #table { table-layout: fixed; } .content { white-space: nowrap; text-overflow: ellipsis; -o-text-ove ...

  7. css 控制文字显示两行,多余用省略号 手机端

    p { width:100px; position:relative; line-height:20px; /*行高为高度的一半,这样就是两行*/ height:40px; overflow:hidd ...

  8. css多余字符显示省略号

    width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; ;

  9. 微信小程序 wxml 文件中如何让多余文本省略号显示？

    废话不多说,之前写小程序碰到了一个问题,如何在 wxml 页面中截取数据? 1.wxs   取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的. 那还有 cs ...

随机推荐

  1. 2-开发共享版APP(搭建指南)-修改包名

    https://www.cnblogs.com/yangfengwu/p/11273734.html https://www.cnblogs.com/yangfengwu/p/11273746.htm ...

  2. 2014(5)系统设计，web应用

    [案例五](共25分) 阅读以下关于Web应用的叙述,在答题纸上回答问题1至问题2. [说明] 某软件公司拟为其客户开发一套基于Web的电子商务系统,该系统向终端用户提供在线购物功能.近期,项目组召开 ...

  3. vue-echarts在vue中的使用

    安装依赖: [win]npm install echarts vue-echarts [mac]sudo npm install echarts vue-echarts Vue-ECharts 默认在 ...

  4. Chrome崩溃的解决办法

    前两天Win10 更新的安全组件,第二天上班来就打开不了Chrome了,打开就是:噢哟,崩溃了! 那是连 setting 页都打不开的啊...好晕,好晕. 我是真的有点崩溃啊,在网上找了好久,什么与百 ...

  5. 安装-supervisor

    centos 7.xx 1.#yum install python-setuptools 2.#easy_install supervisor 3.# vim /etc/supervisord.con ...

  6. barbor部署

    harbor 部署介绍: 1.版本信息 系统 :Centos 7.5 版本: harbor-offline-installer-v1.8.1 docker :docker-ce-18.06.2.ce- ...

  7. 5 系统的软中断CPU升高，一般处理办法？

    还是需要多动手,一个一个问题个被get!

  8. kafka topic查看删除

    1,查看kafka topic列表,使用--list参数 >bin/kafka-topics.sh --zookeeper 127.0.0.1:2181 --list __consumer_of ...

  9. Python3多进程共享变量实现方法

    今天同事反映一个问题让帮忙看一下:多进程共用一个变量,在一个进程中修改后,在另外的进程中并没有产生修改. 一.错误的实现方式 最初以为是没添加global声明导致修改未生效,但实际操作发现global ...

  10. [转帖]疑似兆芯开先KX-7000跑分曝光：IPC性能大幅提升

    疑似兆芯开先KX-7000跑分曝光:IPC性能大幅提升 https://www.bilibili.com/read/cv4028300 数码 11-23 1589阅读28点赞22评论 尽管有ARM架构 ...