声明：此文章为转载（点击查看原文），如有侵权24小时内删除。联系QQ：1522025433.

对于单行文字, 很简单.(详见css3产考手册 进入)

css:

.oneLine {

    width: 200px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}

对于多行文字, 上面的代码就不适用了. web-kit based 的浏览器提供了对这个特殊需求的支持.

css：

.twoLine {

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp:;

    -webkit-box-orient: vertical;

}

你只要调整-webkit-line-clamp的值就能实现在第n行[...].

下面看一个完整实例：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>多行文本实现超出...</title>

<style type="text/css">

    .twoLine {

        width: 100px;

        height: 100px;

        border: 1px solid red;

        overflow: hidden;

        text-overflow: ellipsis;

        display: -webkit-box;

        -webkit-line-clamp: 3; /*第三行显示 ...*/

        -webkit-box-orient: vertical;

    }

</style>

</head>

<body>

<div class="twoLine">测试文本测试文本测试文本测试文本本测试文本测试文本测试文</div>

</body>

</html>

谷歌浏览器中的效果：

但是：

对于其他内核的浏览器就只能用javascript来hack了.

Vimeo的Joe已经实现了这一功能, 可以参考 https://github.com/josephschmitt/Clamp.js 来详细了解.

多行文字溢出[...]的实现(text-overflow: ellipsis)的更多相关文章

  1. 单行文字溢出和多行文字溢出省略号显示的CSS样式

    单行文字溢出,CSS样式 <h6 style="width:70px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis ...

  2. css 一行或多行文字溢出以...的形式隐藏

    一行文字溢出以...形式隐藏 我需要隐藏... css代码如下: white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 多行文字溢出 ...

  3. -webkit-line-clamp 多行文字溢出...

    一.应用 CSS代码: .box { width: 100px; display: -webkit-box; -webkit-line-clamp:; -webkit-box-orient: vert ...

  4. -webkit-line-clamp下多行文字溢出点点点...

    限制在一个块元素显示的文本的行数. -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中. 为了实现该 ...

  5. 移动端小总结(1)---meta、input和单行多行文字溢出省略号

    一.常用META 1. 添加到主屏后的标题(IOS) 1 <meta name="apple-mobile-web-app-title" content="标题&q ...

  6. -webkit-line-clamp下多行文字溢出点点点...显示实例页面

    overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box ...

  7. CSS实现单行与多行文字省略（truncation）

    在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字 ...

  8. CSS文字溢出处理问题

    单行省略 div { white-space:nowrap; //断行处理:无断行 text-overflow:ellipsis; //文字溢出处理:省略号 overflow:hidden; //溢出 ...

  9. CSS清除浮动&内容居中&文字溢出

    学习! 1.CSS清除浮动的方法 (1)添加标签清除浮动: 在浮动元素结尾处,并列的添加标签<div style="clear:both;"></div>. ...

随机推荐

  1. Meavn项目中log4j的使用

    两个步骤: 1.在pom.xml中添加: <dependency> <groupId>log4j</groupId> <artifactId>log4j ...

  2. SQL Server 日期和时间类型

    在Microsoft SQL Server的类型系统中,使用 date 表示日期类型,使用time表示时间类型,使用DateTime和DateTime2表示日期和时间的组合,DateTime2是Dat ...

  3. Java IO笔记

    第一:File类(主要获取文件名,判断文件是否存在,创建或者删除文件) 举个例子,代码如下: import java.io.File; public class Main{ public static ...

  4. centos7 卸载rpm安装的包

    1.查看已装包 rpm -qa | grep pgpool 2.卸载包 rpm -e 包名 3.示例(卸载pgpool) [root@VM_145_153_centos etc]# rpm -qa | ...

  5. [译]Quartz.NET 框架 教程（中文版）2.2.x 之第七课 触发监听器和作业任务监听器

    第七课:触发监听器和作业任务监听器 监听器是在调度器中基于事件机制执行操作的对象.你大概可以猜到,触发监听器接收响应跟触发器有关的事件,作业任务监听器接收响应跟作业任务有关的事件. 跟触发器有关的事件 ...

  6. 说几个python与c区别的地方以及静态变量，全局变量的区别

    一: python代码: a = 2 def b(): print a a = 4 print a b() 在b函数中,有a=4这样的代码,说明a是函数b内部的局部变量,而不是外部的那个值为2的全局变 ...

  7. AQS框架

    java并发包基石 AQS是JUC中很多同步组件的构建基础,简单来讲,它内部实现主要是状态变量state和一个FIFO队列来完成,同步队列的头结点是当前获取到同步状态的结点,获取同步状态state失败 ...

  8. python - class类 (二) 静态属性/类方法/静态方法

    静态属性: #静态属性 = 数据属性 (@property) class mianji(): def __init__(self,x,y): self.x = x self.y = y #类的函数方法 ...

  9. SpringBoot三种配置Dubbo的方式

    *必须首先导入dubbo-starter (1).使用SpringBoot配置文件(application.properties或application.yml) dubbo.application. ...

  10. 【转】Python流程控制语句

    [转]Python流程控制语句 人们常说人生就是一个不断做选择题的过程:有的人没得选,只有一条路能走:有的人好一点,可以二选一:有些能力好或者家境好的人,可以有更多的选择:还有一些人在人生的迷茫期会在 ...