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. 【转】HashMap和HashSet的区别

    原文网址:http://www.importnew.com/6931.html HashMap和HashSet的区别是Java面试中最常被问到的问题.如果没有涉及到Collection框架以及多线程的 ...

  2. 【Android官方Training教程】Getting Started部分学习笔记

    Getting Started Welcome to Training for Android developers. Here you'll find sets of lessons within ...

  3. 酷派D530刷机指引之官方ROM

    刷机前的准备工作 刷官方ROM的大致过程就是:先手机连接电脑,然后在电脑上运行刷机工具,然后那个刷机工具就会把你选择的ROM装到手机里面,然后就没有然后了. 所以在刷机之前,硬件方面需要准备好: 充满 ...

  4. Java学习日记 集合

    一.接口Map<K,V>1.V put(K key, V value)2.int size()3.public class HashMap<K, V> implements M ...

  5. [Design Pattern] Flywight Pattern 简单案例

    Flywight Pattern, 即享元模式,用于减少对象的创建,降低内存的占用,属于结构类的设计模式.根据名字,我也将其会理解为 轻量模式. 下面是享元模式的一个简单案例. 享元模式,主要是重用已 ...

  6. linux 虚拟机下配置tomcat

    1.在wind系统下载tomcat,tomcat8版本的需要jdk1.8以上的才支持. 下载位置:http://tomcat.apache.org/download-80.cgi -> core ...

  7. thead、tbody、tfoot与顺序无关

    今天发现一个问题,thead.tbody.tfoot等标签的内容排版与顺序无关,做了一个小的实验:

  8. uva 12253 - Simple Encryption(dfs)

    题目链接:uva 12253 - Simple Encryption 题目大意:给定K1.求一个12位的K2,使得KK21=K2%1012 解题思路:按位枚举,不且借用用高速幂取模推断结果. #inc ...

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

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

  10. ajax的来龙去脉

    这是我在博客园写的第一遍博客,之前都是只看不写,在园子里学到了不少的东西,现在也想着把自己的一些感悟写出来给大家分享一下. ajax技术可以说是Web2.0应用程序的技术基础,尽管软件经销商和开源社区 ...