最主要的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. Python 加入类型检查

    Python 是一门强类型的动态语言, 对于一个 Python 函数或者方法, 无需声明形参及返回值的数据类型, 在程序的执行的过程中, Python 解释器也不会对输入参数做任何的类型检查, 如果程 ...

  2. Shell里的特殊符号

    Shell里的特殊符号: (1)单引号: 由单引号括起来的符号都作为普通字符处理,他们都失去了特殊意义. (2)双引号: 除美元符号($).倒引号.反斜线(\)仍保留特殊含义外,其余符号都作为普通字符 ...

  3. NOIP2019翻车前计划以及日记

    目前只有日记和草拟计划(Sua机洗点~),等停课后会实施计划,试行期为一天. 根据试行期的学习效果制定计划. update 1:试行期结束,完全可以按计划来. update 2:计划暂时变更,以适应我 ...

  4. ZROI 暑期高端峰会 A班 Day5 杂题选讲

    CF469E \(n\) 个需要表示的数,请使用最少的 \(2^k\) 或 \(-2^k\) 表示出所有需要表示的数.输出方案. \(n\le 10^5,|a_i|\le 10^5\). 首先每个数肯 ...

  5. 认识随机函数rand()和srand(unsigned int )

    rand函数 int rand( void ); 函数名:   rand 功   能:   随机数发生器 用   法:   int rand(void); 所在头文件: stdlib.h 函数说明 : ...

  6. Leetcode 219. 存在重复元素 II

    说明: 首先,这是一道Easy题,我天!但是题意理解还是很多坑~ 题目描述: 给定一个整数数组和一个整数 k,判断数组中是否存在两个不同的索引 i 和 j,使得 nums [i] = nums [j] ...

  7. shell 一些例子

    #!/bin/bash #Filename: password.sh  by:-V love cmx stty -echo #这里表示 开启隐藏在终端的输出 read -p "Enter y ...

  8. xcode选项Build Active Architecture Only的作用

    Build Active Architecture Only 设置: 设置为NO的时候,会导致react-native项目启动失败npx react-native run-ios 根据错误信息 bui ...

  9. Docker方式安装SonarQube

    获取镜像 docker pull postgres: docker pull sonarqube:-community 启动镜像 docker run -d -p : -e POSTGRES_PASS ...

  10. Java操作Hive

    Hadoop版本:hadoop-2.9.2.tar.gz,Hive版本:apache-hive-2.3.6-src.tar.gz,安装Hive可查看:CentOS安装Hive 保证Hive以正确启动h ...