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. 《Ruby语言入门教程v1.0》学习笔记-02

    9.18 第四章 一切都是对象 这个章节的例子都举得很浅显易懂,而且作者的语言= =噗,委实生动有趣啊是~~ 4.1  两种思维方式 初期的编程思想是:以“如何做”为指导来编写代码.这时期的编程语言叫 ...

  2. Ajax之 beforeSend和complete longind制作

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; min-height: 18.0px } p.p2 { margin: 0 ...

  3. 标准简单SP模板（sql server）

    CREATE Procedure eSP_ChangeStart --eSP_ChangeStart 64 @ID int, Output As Declare ), @ID_Max int Begi ...

  4. Unity3D NGUI UIPlayTween控件（一）动态打开关闭窗口

    利用NGUI自带的脚本控件实现按钮点击窗口滑动出现与隐藏. 创建界面 首先建立如下图的三个BUtton与三个Panel 绑定脚本 然后在每个Button上添加UIPlayTween脚本,在Intera ...

  5. ios将一个项目完全导为另一个项目(tool)

    --前言:有时开始一个新项目,但新项目跟已做完的一个项目很类似,基本可以在原有项目上更改.这个时候,可以new一个新project,在将相应的代码文件copy到新的project,配置工程各参数,库等 ...

  6. android中画文字的换行 办法（对于遇到canvas.drawText(String s )无法实现换行问题的解决）

    在使用canvas.drawText()绘制文字的时候,发现,如果需要绘制的文字较长,需要换行,通过在文字中加上“\n"或者”\r\n"都无法实现换行,如果非要使用canvas.d ...

  7. android 回调机制实例！

    详细实现为在类中定义接口.在接口的实现方法中传入參数(也能够不传). 在调用类中传入新建的接口.并实现未实现的方法. public class CallBackClass { //传入对应的接口作为參 ...

  8. 淘宝数据库OceanBase SQL编译器部分 源代码阅读--Schema模式

    淘宝数据库OceanBase SQL编译器部分 源代码阅读--Schema模式 什么是Database,什么是Schema,什么是Table,什么是列,什么是行,什么是User?我们能够能够把Data ...

  9. TinyXml高速入门（一）

    作者:朱金灿 来源:http://blog.csdn.net/clever101 对于xml文件,眼下我的工作仅仅是集中在配置文件和作为简单的信息文件来用,因此我不太喜欢使用msxml这样的重量级的x ...

  10. "ping: unknown host www.baidu.com" 解决方法

    如果某台Linux服务器ping不通域名, 如下提示: # ping www.baidu.comping: unknown host www.baidu.com 如果确定网络没问题的情况下, 可以通过 ...