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. Java---文件的切割与合并，已经实现图形界面(工具)

    实现对任意文件的切割,实现对切割后的文件的合并. 上次只写了特定目录下的文件切割与合并,有点遗憾, 这次,我写了一个图形界面来实现对文件的切割与合并. 文件切割: 用户可以自己选择需要切割的文件, 软 ...

  2. HDOJ(HDU) 1994 利息计算(简单题目)

    Problem Description 为自行解决学费,chx勤工俭学收入10000元以1年定期存入银行,年利率为3.7% .利率 按年计算,表示100元存1年的利息为3.7元.实际上有时提前有时推迟 ...

  3. HDOJ 2092 整数解（2次方程整数解公式）

    Problem Description 有二个整数,它们加起来等于某个整数,乘起来又等于另一个整数,它们到底是真还是假,也就是这种整数到底存不存在,实在有点吃不准,你能快速回答吗?看来只能通过编程. ...

  4. Foundation Data Structure

    LinkedList : /** * 考虑的比较的周全,并且包含了全部的情况,代码也不乱<b></b> * * @param index * 插入的位置 * @param c ...

  5. shell中条件判断if中的-z到-d的意思【转载】

    本文转载自[http://blog.csdn.net/utstarm/article/details/6536916] [ -a FILE ]  如果 FILE 存在则为真. [ -b FILE ] ...

  6. CSAPP:Binary Bomb

    本篇文章参考了:http://www.cnblogs.com/remlostime/archive/2011/05/21/2052708.html大神的文章,有时候没思路了会来看一下,但是保证本文的每 ...

  7. AOJ 0558 广度优先搜索

    题意:在 H * W 的地图里有 N 个工厂,每个工厂分别生产硬度为1-N 的奶酪,有一只老鼠准备把所有奶酪都吃完.老鼠的初始体力值为1,每吃一个奶酪体力值加 1.已知老鼠不能吃硬度大于当前体力值的奶 ...

  8. Redis需要你来做的算法优化

    阅读一个优秀的Server内核实现,早期的代码比后期的代码要好得多.因为在早期的代码里,你可以学习到一个黑客级别的程序猿到底在思考什么.同时,你能看到他哪里写得差劲,以及后来是怎么优化的. 如果你一心 ...

  9. java笔记12之面向对象初始

    1 概述 类:是一组相关的属性和行为的集合.是一个抽象的概念.     对象:是该类事物的具体表现形式.具体存在的个体. (1)面向对象思想     面向对象是基于面向过程的编程思想.         ...

  10. Python学习笔记2-flask-sqlalchemy 简单笔记

    flask-sqlalchemy 简单笔记 字数 阅读 评论 喜欢 flask-sqlalchemy SQLAlchemy已经成为了python世界里面orm的标准,flask是一个轻巧的web框架, ...