最主要的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. 从0到1的开发，社交App 完成

    内容概要 GitHub链接:GitHub链接 客户端使用Android Studio 服务端使用IDEA + SpringBoot + MyBaits 完成功能 添加好友,即时聊天,社交广场 只是一个 ...

  2. 【视频技术】FFMPEG应用（转）

    https://blog.csdn.net/kaikai136412162/article/details/80746961 https://blog.csdn.net/weixin_37897683 ...

  3. JS 中的 new 操作符

    按照javascript语言精粹中所说,如果在一个函数前面带上new来调用该函数,那么将创建一个隐藏连接到该函数的prototype成员的新对象,同时this将被绑定到那个新对象上.这个话很抽象,我想 ...

  4. macOS Catalina 的zsh升级

    MacOS最近做了一个大版本升级,这次升级中对开发者有个很大的更新是,模式的shell变成了zsh,官方提供了升级配置文档:https://support.apple.com/zh-cn/HT2080 ...

  5. selenium send_keys慢，卡，怎么办？这里有你想要的解决方案

    相信各位看官在用selenium时,会发现发送长字符时,一个字符一个字符在输入,特别在使用chrome时,更加明显. 如果你的网页是要大量编辑的怎么处理呢? 一.send_keys机制 既然问题出来了 ...

  6. js日志组件封装

    js日志组件~~ 1 function Logger(level) { if (!(this instanceof Logger)) { return new Logger(); } var ERRO ...

  7. 排序算法-快速排序（Java）

    package com.rao.sort; import java.util.Arrays; /** * @author Srao * @className QuickSort * @date 201 ...

  8. vs工具类SQLhelper参考

    参考 https://www.cnblogs.com/liyangLife/p/5036636.html

  9. Salesforce 开发整理（三）权限共享

    Salesforce提供对象的访问权限可以通过 安全性控制 → 共享设置,可以查看每个对象在系统内部默认的访问权限 共用读写:对象的记录任何用户都可以进行读写操作 公用只读:对象的记录任何用户都可以查 ...

  10. 【IntelliJ IDEA学习之三】IntelliJ IDEA常用快捷键

    版本:IntelliJIDEA2018.1.4 按场景列举一.打开设置CTRL + ALT + S:打开设置(File-->Settings...)Ctrl + Shift + Alt + S: ...