最主要的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. java.sql.SQLException: Access denied for user 'root'@'10.1.0.2' (using password: YES)

    java.sql.SQLException: Access denied for user 'root'@'10.1.0.2' (using password: YES) at com.mysql.c ...

  2. CSP 201903-2 24点

    这是上一次考csp时遇到的一道简单的问题,但是当时太菜了没有写出来. 问题描述: 直接上图 解决思路: 标准的表达式求解,可以用符号栈和数值栈来存放运算符和数值,需要注意的是从左到右扫描的时候 遇到 ...

  3. 16-C#笔记-枚举

    枚举同C++ using System; namespace EnumApplication { class EnumProgram { enum Days { Sun, Mon, tue, Wed, ...

  4. Python面向对象 | isinstance和issubclass

    isinstance(a,b):判断a是否是b类(或者b类的基类)实例化的对象 class A: pass class B(A): pass obj = B() print(isinstance(ob ...

  5. Educational Codeforces Round 78 (Rated for Div. 2) B - A and B（思维）

  6. 【数位DP】【P2657】[SCOI2009]windy数

    Description windy定义了一种windy数.不含前导零且相邻两个数字之差至少为 \(2\) 的正整数被称为windy数. windy想知道, 在 \(A\) 和 \(B\) 之间,包括 ...

  7. 填坑 bzoj3337

    算是个板子题吧,就是不知道啥时候能写出来. #include<cstring> #include<iostream> #include<cctype> #inclu ...

  8. Java 并发系列之七：java 阻塞队列（7个）

    1. 基本概念 2. 实现原理 3. ArrayBlockingQueue 4. LinkedBlockingQueue 5. LinkedBlockingDeque 6. PriorityBlock ...

  9. concurrent（七）ConcurrentHashMap源码分析

    参考文档:https://www.cnblogs.com/xiaoxi/p/7474026.html https://www.ibm.com/developerworks/cn/java/java-l ...

  10. Linux内核引用计数器kref结构

    1.前言 struct kref结构体是一个引用计数器,它被嵌套进其它的结构体中,记录所嵌套结构的引用计数.引用计数用于检测内核中有多少地方使用了某个对象,每当内核的一个部分需要某个对象所包含的信息时 ...