1.单行文本添加省略号

一般用于新闻列表展示

li{

width: 200px;

height: 30px;

line-height: 30px;

cursor: pointer;

list-style-position: inside;/*将列表图标位置设置为inside，默认outside，overflow值为hidden时会截取掉*/

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <ul>

            <li title="JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象。">JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象。</li>

            <li title="DOM 描述了处理网页内容的方法和接口。">DOM 描述了处理网页内容的方法和接口。</li>

            <li title="BOM 描述了与浏览器进行交互的方法和接口。">BOM 描述了与浏览器进行交互的方法和接口。</li>

        </ul>

    </body>

</html>

小tip：为添加省略号的文本标签添加title属性，值为完整文本，当用户鼠标停留在该文本时，会显示完整内容。

核心代码：

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

overflow 溢出

值：

visible：元素的内容在元素框之外也可见（溢出内容不被剪裁）

hidden：元素的内容会在元素框的边界处剪裁，并且超出剪裁区域的内容不可见

scroll：元素的内容会在元素框的边界处剪裁，但浏览器会显示滚动条以便查看其余的内容

auto： 如果内容被剪裁，则浏览器会显示滚动条以便查看其余的内容

inherit

初始值：visible

应用于：块级元素、替换元素、表单元素

text-overflow 文本溢出

值：

clip：不显示省略标记(...)，只是简单的裁切，相当于无效果

ellipsis：文本溢出时显示省略标记(...)，省略标记插入的位置是最后一个字符

初始值：cilp

应用于：块级元素、替换元素、表单元素

white-space 空白符

（空白符是指空格、制表符he回车；HTML默认将所有空白符合并为一个空格）

值：

normal：合并空白符，允许自动换行

nowrap：合并空白符，不允许自动换行

pre-line：合并空白符（不包括换行符），允许自动换行

pre：不合并空白符，不允许自动换行

pre-wrap：不合并空白符，允许自动换行

2.多行文本末显示省略号

① Webkit浏览器或移动端页面

p{

width: 200px;height:150px;border: 1px solid pink;

 line-height: 30px;cursor: pointer;padding: 0 5px;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp:;

-webkit-box-orient: vertical;
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <p title="Web 浏览器对于 ECMAScript 来说是一个宿主环境，但它并不是唯一的宿主环境。事实上，还有不计其数的其他各种环境（例如 Nombas 的 ScriptEase，以及 Macromedia 同时用在 Flash 和 Director MX 中的 ActionScript）可以容纳 ECMAScript 实现">Web 浏览器对于 ECMAScript 来说是一个宿主环境，但它并不是唯一的宿主环境。事实上，还有不计其数的其他各种环境（例如 Nombas 的 ScriptEase，以及 Macromedia 同时用在 Flash 和 Director MX 中的 ActionScript）可以容纳 ECMAScript 实现</p>

    </body>

</html>

核心代码：

{

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp:;

-webkit-box-orient: vertical;

}

display：-webkit-box；将对象作为弹性盒子模型显示。

-webkit-box-orient；设置或检索伸缩盒对象的子元素的排列方式。

-webkit-line-clamp；限制在一个块元素显示的文本的行数。

小tip：该属性为webkit的私有属性，只适用于webkit内核浏览器或移动端。

② 跨浏览器兼容方案

②-1：设置相对定位的容器高度，用包含省略号（...）的元素模拟实现

p{

width: 200px;height:150px;border: 1px solid pink;line-height: 30px;cursor: pointer;padding: 0 5px;

overflow: hidden;

position: relative;

}

span{

position: absolute;
bottom:;
right:;

}
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <p title="Web 浏览器对于 ECMAScript 来说是一个宿主环境，但它并不是唯一的宿主环境。事实上，还有不计其数的其他各种环境（例如 Nombas 的 ScriptEase，以及 Macromedia 同时用在 Flash 和 Director MX 中的 ActionScript）可以容纳 ECMAScript 实现">Web 浏览器对于 ECMAScript 来说是一个宿主环境，但它并不是唯一的宿主环境。事实上，还有不计其数的其他各种环境（例如 Nombas 的 ScriptEase，以及 Macromedia 同时用在 Flash 和 Director MX 中的 ActionScript）可以容纳 ECMAScript 实现<span>...</span></p>

    </body>

</html>

②-2：通过伪元素模拟添加省略号（...）

p{

width: 200px;height:150px;border: 1px solid pink; line-height: 30px;cursor: pointer;padding: 0 5px;

overflow: hidden;

position: relative;

}

p:after{

content: '...';

position: absolute;
background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
bottom:;
right:;
}

小tip：

a.height高度应是line-height的n（行数）倍；

b.结束的省略号可用半透明png做减淡效果，或者设置背景颜色；

c.IE6-7不显示content内容，解决方案如下：

　　引入jquery和jquery.pseudo.js

　　

p{

width: 200px;height:150px;border: 1px solid pink; line-height: 30px;cursor: pointer;padding: 0 5px;

overflow: hidden;

position: relative;

}

span{

after:'...';

position: absolute;

right:;

bottom:;

}

3.JavaScript方案

a.Clamp.js

下载及文档地址：https://github.com/josephschmitt/Clamp.js

使用：

var module = document.getElementById("clamp-this-module");

$clamp(module, {clamp: 3});

b.jQuery.dotdotdot

下载及详细文档地址：https://github.com/BeSite/jQuery.dotdotdot或http://dotdotdot.frebsite.nl/

使用：

$(document).ready(function() {

    $("#wrapper").dotdotdot({

        //    configuration goes here

    });

});

单/多行文本添加省略号 (oﾟωﾟo)的更多相关文章

  1. js实现单双行文本溢出添加省略号

    # 单双行文本溢出省略 ``` // 2. 当内容过多的时候,单行省略号: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; ...

  2. 翻译：如何使用CSS实现多行文本的省略号显示

    本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添加译者的一些感想,请各位读者谅解. 合理的 ...

  3. jQuery动态添加的元素中处理字符串溢出后在指定字符数后添加省略号

    "+[jsonData[i].questitle.lenth>40?jsonData[i].questitle.substring(0,40)+"...":json ...

  4. css超出一行添加省略号属性:text-overflow和white-space

    通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下html代码: <p>前端开发博客专注前端开发和技术分享,如果描述超过100像素 ...

  5. Python实现单链表数据的添加、删除、插入操作

    Python实现单链表数据的添加.删除.插入操作 链表的定义: 链表(linked list)是由一组被称为结点的数据元素组成的数据结构,每个结点都包含结点本身的信息和指向下一个结点的地址.由于每个结 ...

  6. 使用logisim搭建单周期CPU与添加指令

    使用logisim搭建单周期CPU与添加指令 搭建 总设计 借用高老板的图,我们只需要分别做出PC.NPC.IM.RF.EXT.ALU.DM.Controller模块即可,再按图连线,最后进行控制信号 ...

  7. 关于Web项目里的给表单验证控件添加结束时间不得小于开始时间的验证方法，日期转换和前台显示格式之间，还有JSON取日期数据格式转换成标准日期格式的问题

    项目里有些不同页面间的日期显示格式是不同的, 第一个问题: 比如我用日期控件WdatePicker.js导包后只需在input标签里加上onClick="WdatePicker()" ...

  8. VC单文档对话框添加托盘图标

    一 单文档添加托盘 1. 在CMainFrame中定义NOTIFYICONDATA结构m_notify 2.在OnCreate中添加托盘初始化代码 int CMainFrame::OnCreate(L ...

  9. 使用django表单，使网页添加上传文件，并分析文件。

    开发环境是: apache + python + django+ eclipse(开发环境) 欲达到目的: 在网页上,添加上传文件控件.然后读取csv文件,并分析csv文件. 操作步骤: django ...

随机推荐

  1. Bit,Bytes,KB,MB,GB,TB,PB,EB,ZB,YB

    Bit,Bytes,KB,MB,GB,TB,PB,EB,ZB,YB 汉字字符 2字节英文字符 1字节中文标点 2字节英文标点 1字节一个字节就是一个八位二进制数啊,2就是00000010,4就是000 ...

  2. puppet yum安装配置,简单证书维护

    Puppet学习之puppet的安装和配置 一.Puppet简介 Puppet基于ruby语言开发的自动化系统配置工具,可以C/S模式或独立运行,支持对所有UNIX及类UNIX系统的配置管理,最新版本 ...

  3. gem安装时出现 undefined method `size' for nil:NilClass (NoMethodError) 的解决办法

    终端输入gem env 得到gem的PATH路径,比如 - GEM PATHS: - /usr/local/ruby/lib/ruby/gems/2.1.0 - /home/vagrant/.gem/ ...

  4. java中字符串的比较

    compareTo方法是比较两个字符串的词典顺序  也就是在字典中的顺序,比如“abcd”在“acdb”前面 大于返回1,小于返回-1 equals:比较两字符串的内容是否相同. 相同返回1,不同返回 ...

  5. ECLIPSE/MYECLIPSE OPERATES

    Eclipse相关操作 1.删除所有注释 1.eclipse删除所有注释 Ctrl+F: /\*{1,2}[\s\S]*?\*/ 选择正则表达式,替换全部即可.

  6. 桌面环境与桌面搜索Desktop Search tools

    最近一段时间工作重心都将放在Linux下Desktop search(桌面搜索)框架的研发上.因此对desktop search进行了初步的调研.本文将从下面三个方面展开: Linux桌面环境(Des ...

  7. Windows消息传递机制具体解释

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka Windows是一个消息(Message)驱动系统.Windows的消息提供了应用程序之间.应 ...

  8. Android开源项目分类汇总[转]

    Android开源项目分类汇总 如果你也对开源实现库的实现原理感兴趣,欢迎 Star 和 Fork Android优秀开源项目实现原理解析欢迎加入 QQ 交流群:383537512(入群理由需要填写群 ...

  9. 高性能MySql进化论(一):数据类型的优化_上

    在数据库的性能调优的过程中会涉及到很多的知识,包括字段的属性设置是否合适,索引的建立是否恰当,表结构涉及是否合理,数据库/操作系统 的设置是否正确…..其中每个topic可能都是一个领域. 在我看来, ...

  10. easyui 分页实现

    1.用datagrid 做分页显示, 依据API样例,最终解决.废话不说,datagrid分页 有一个附加的分页控件 通过在datagrid中设置pagination:true 就会显示分页 当请求是 ...