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. JavaScript权威指南学习笔记5

    下午在杭图回去前看了书中第二部分的13-17章,看的很粗,感觉大部分东西自己已经知道或者平时开发中不会用到,很多章节只是简单的翻了一下,没有仔细思考里面说到的道理,下面对各章节简单的记录下. 第13章 ...

  2. LVS安装配置

    LVS安装部署 一.LVS安装(CENTOS) 1.LVS模块ip_vs已经内置在LINUX内核中,一般情况下ip_vs并没有启动,可以通过lsmod | grep ip_vs查看,能够看到信息表示模 ...

  3. NodeJs安装与使用入门

    一.NodeJs简介 NodeJS官网上的介绍: Node.js is a platform built on  Chrome's JavaScript runtime  for easily bui ...

  4. HDU 4828 - Grids (Catalan数)

    题目链接 : http://acm.hdu.edu.cn/showproblem.php?pid=4828 Catalan数的公式为 C[n+1] = C[n] * (4 * n + 2) / (n ...

  5. bda_百度百科

    bda_百度百科 bda

  6. java创建XML及开源DOM4J的使用

    java import java.io.File; import java.io.StringWriter; import javax.xml.parsers.DocumentBuilder; imp ...

  7. homebrew介绍

    对于一个习惯了在 Ubuntu 的终端上通过 apt-get 来安装工具软件的我来说,也希望在Mac上找到类似的工具,能很方便的一条命令就能安装所需的软件,而不用手工的去查找下载编译,或者是折腾安装所 ...

  8. motan源码分析二：使用spi机制进行类加载

    在motan的源码中使用了很多的spi机制进行对象的创建,下面我们来具体分析一下它的实现方法. 1.在实际的jar包的\META-INF\services目录中引入相关的文件,例如下图中,我解压了co ...

  9. javascript MD5

    var MD5 = function (string) { function RotateLeft(lValue, iShiftBits) { return (lValue<<iShift ...

  10. Svg操作

    SVG文件的JavaScript操作 获取SVG DOM 如果使用img标签插入SVG文件,则无法获取SVG DOM.使用object.iframe.embed标签,可以获取SVG DOM. var ...