一、背景

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

二、实现步骤

　　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. ZOJ 2334 Monkey King

    并查集+左偏树.....合并的时候用左偏树,合并结束后吧父结点全部定成树的根节点,保证任意两个猴子都可以通过Find找到最厉害的猴子                       Monkey King ...

  2. 用MVC的辅助方法自定义了两个控件：“可编辑的下拉框控件”和“文本框日历控件”

    接触MVC也没多长时间,一开始学的时候绝得MVC结构比较清晰.后来入了门具体操作下来感觉MVC控件怎么这么少还不可以像ASP.net form那样拖拽.这样设计界面来,想我种以前没学过JS,Jquer ...

  3. tcl实现http请求

    package require "http" proc errLog args { puts $args } proc SendHttp args { global token s ...

  4. C语言各种标准的

    [K&R C] 1978 年,Dennis Ritchie 和 Brian Kernighan 合作推出了<The C Programming Language>的第一版(按照惯例 ...

  5. Redis学习笔记六：独立功能之 Lua 脚本

    Redis 2.6 开始支持 Lua 脚本,通过在服务器环境嵌入 Lua 环境,Redis 客户端中可以原子地执行多个 Redis 命令. 使用 eval 命令可以直接对输入的脚本求值: 127.0. ...

  6. Promise 原理探究及其简单实现

    可移步 http://donglegend.com/2016/09/11/promise%E5%8E%9F%E7%90%86%E6%8E%A2%E7%A9%B6/ 观看 Promise是个什么玩意,大 ...

  7. ActionBar使用

    在Android3.0之后,Google对UI导航设计上进行了一系列的改革,其中有一个非常好用的新功能就是引入的ActionBar,他用于取代3.0之前的标题栏,并提供更为丰富的导航效果. 一.添加A ...

  8. 最牛X的GCC 内联汇编

    导读 正如大家知道的,在C语言中插入汇编语言,其是Linux中使用的基本汇编程序语法.本文将讲解 GCC 提供的内联汇编特性的用途和用法.对于阅读这篇文章,这里只有两个前提要求,很明显,就是 x86 ...

  9. 应用alter index ××× monitoring usage;语句监控索引使用与否

    随着时间的累积,在没有很好的规划的情况下,数据库中也许会存在大量长期不被使用的索引,如果快速的定位这些索引以便清理便摆在案头.我们可以使用"alter index ××× monitorin ...

  10. android中paint的setXfermode属性

    本文前半部分来自于:http://www.cnblogs.com/rayray/p/3670120.html 1.下面的Xfermode子类可以改变这种行为: AvoidXfermode  指定了一个 ...