一、背景

　　在实际项目中，我们常常需要对某些页面的某些特定区域显示指定数量的内容，超出的内容显示"..."来进行美化页面，那么应该怎么做呢？今天就让我们来看看如何达到这一效果。

二、实现步骤

　　CSS代码

.ov{

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

这样我们就实现了这一效果，但是限制条件是：所要显示的内容只能在一行，不能有换行出现，否则不起作用。

测试代码

 <!DOCTYPE html>

 <html>

     <head>

     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

         <title>测试超出显示点点点</title>

         <style type="text/css">

             .ov{

                 white-space:nowrap;

                 overflow:hidden;

                 text-overflow:ellipsis;

                 width:200px;

                 margin:30px auto;

             }

         </style>

     </head>

 <body>

     <div class="ov">

         测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点

     </div>

 </body>

 </html>

显示效果如下：

CSS实现限制显示的字数，超出显示"..."的更多相关文章

  1. vue 字符串长度控制显示的字数超出显示省略号

    1. html <p class="index__Feature-list-itemlist-title newline"> {{item.name| ellipsis ...

  2. CSS控制文字显示一行，超出显示省略号

    这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...

  3. Css——显示2行数据，超出显示...

    解决需求——数据较长时,只显示两行,超出显示... .showTwoRow { text-align: left; text-overflow: ellipsis; display: -webkit- ...

  4. 怎么实现CSS限制字数,超出部份显示点点点.

    如何实现CSS限制字数,超出部份显示点点点... <div style="width:200px; white-space:nowrap;overflow:hidden;text-ov ...

  5. CSS限制字数,超出部份显示点点点...

    最近项目中需要用CSS实现限制字数,超出部份显示点点点...,只需要一下代码即可: width:400px;/*要显示文字的宽度*/ text-overflow :ellipsis; /*让截断的文字 ...

  6. html实现钝角效果；html实现限制一行字数的显示，超出的部分用省略号（....）来代替

    前端实现div框边角的钝化虽然简单,但是有时候突然想不到,特此写下几句实现方法,以便记忆. 实现div框四个角都钝角的操作:设置 div : border-radius=10px; 实现div框一个角 ...

  7. CSS div内文字显示两行，超出部分省略号显示

    1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...

  8. 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行，第二行省略号显示css方法

    文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap;  强制文本不换行 折 ...

  9. 文本超出显示省略号CSS

    单行超出显示省略号 display: block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 多行超出显示省略号 1.普 ...

随机推荐

  1. 【PHP面向对象(OOP)编程入门教程】22.把对象串行化serialize()方法，__sleep()方法，__wakeup()方法

    有时候需要把一个对象在网络上传输,为了方便传输,可以把整个对象转化为二进制串,等到达另一端时,再还原为原来的对象,这个过程称之为串行化(也叫序列化), 就像我们现在想把一辆汽车通过轮船运到美国去,因为 ...

  2. xcode7 NSAppTransportSecurity

    在Info.plist中添加  NSAppTransportSecurity 类型  Dictionary Dictionary 下添加  NSAllowsArbitraryLoads 类型 Bool ...

  3. Linux文件处理命令

    1.权限处理 1.1 方法一 使用+-=的方法 1.1.1权限 rwx r 读 w 写 x 执行 1.1.2用户 ugoa u 所有者 g 用户组 o 其他人 a 表示以上所有 修改文件的方法 例: ...

  4. java之stream(jdk8)

    一.stream介绍 参考: Java 8 中的 Streams API 详解   Package java.util.stream   Java8初体验(二)Stream语法详解   二.例子 im ...

  5. Android ListView 图片异步加载和图片内存缓存

    开发Android应用经常需要处理图片的加载问题.因为图片一般都是存放在服务器端,需要联网去加载,而这又是一个比较耗时的过程,所以Android中都是通过开启一个异步线程去加载.为了增加用户体验,给用 ...

  6. 他们在军训，我在搞 OI（Ending）

    Day 7 上午看看数学书,老师让我把导数相关的概念学了.这也没有多高大上,就是一坨公式需要背,什么 (a)' = 0 啦,什么 (xn)' = n·xn-1 啦,什么 sin'(x) = cos(x ...

  7. UML统一建模编程

    PowerDesigner 可以通过类图直接可视化生成代码 UML模型元素: 表示模型中的某个概念(类.对象.用例.结点.组件.包.接口等等): 表示模型间相互连接的关系(关联.泛化.依赖.聚集).

  8. c随机数&运行时间

    #include<stdlib.h> #include<time.h> srand((unsigned) time(NULL)); //用时间做种,每次产生随机数不一样 pri ...

  9. linux awk, xargs

    awk , 很赞的教程:http://coolshell.cn/articles/9070.html xargs, http://blog.csdn.net/andy572633/article/de ...

  10. 【GoLang】50 个 Go 开发者常犯的错误

    1. { 换行:   Opening Brace Can't Be Placed on a Separate Line 2. 定义未使用的变量:  Unused Variables 2. import ...