声明：此文章为转载（点击查看原文），如有侵权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. Scala进阶之路-进程控制之执行shell脚本

    Scala进阶之路-进程控制之执行shell脚本 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 废话不多说,我这里直接放一个案例. /* @author :yinzhengjie ...

  2. 搭建Telnet服务器

    搭建Telnet服务器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 可能大家都知道现在已经很少有人用TELNET服务器, 因为它传输数据是以明文的方式,我们很容易通过抓包软件讲数 ...

  3. Linux命令之touch

    touch命令 用处:新建文件 (默认是文本,你可以自己加后缀) 用法:在终端中输入touch加上要新建的文件的名字(注意!同一目录下文件夹和文件是不允许同名的) 示例: (新建一个名字叫newfil ...

  4. nodeJS安装和环境变量的配置

    推荐博客:https://www.cnblogs.com/zhouyu2017/p/6485265.html npm config list 获取npm配置信息 ------------- 主要写一下 ...

  5. linux僵尸进程产生的原因以及如何避免产生僵尸进程

    给进程设置僵尸状态的目的是维护子进程的信息,以便父进程在以后某个时间获取.这些信息包括子进程的进程ID.终止状态以及资源利用信息(CPU时间,内存使用量等等).如果一个进程终止,而该进程有子进程处于僵 ...

  6. 〖C语言学习笔记 〗(二) 数据类型

    前言 本文为c语言的学习笔记,很多只是留下来占位的 数据类型 助记:变量就是在内存中挖个坑并给这个坑命名,而数据类型就是挖内存的坑的尺寸 基础类型 整数类型: short int int long i ...

  7. sql工具和手工注入总结

    普通注入: 数字注入 字符注入 base64注入:和常规的方法没有说明区别,主要是解码然后编码: 如果普通注入不行,尝试大小写绕过,编码等绕过: 如果不行尝试盲注: POST注入 0x00 常用的 注 ...

  8. C++内存管理（转）http://www.cnblogs.com/qiubole/archive/2008/03/07/1094770.html

    [导语] 内存管理是C++最令人切齿痛恨的问题,也是C++最有争议的问题,C++高手从中获得了更好的性能,更大的自由,C++菜鸟的收获则是一遍一遍的检查代码和对C++的痛恨,但内存管理在C++中无处不 ...

  9. Vue项目实践中的功能实现与要点

    本贴记录项目实践中,各种功能的实现与技术要点,均有待改进. 路由切换的时候,显示loading动画 目前方案是: 在每个页面都手动装载一个loading组件组件的显示依赖vuex里面的一个值 , 在r ...

  10. SVN备份还原

    本文是对SVN备份还原的一个简单记录 /*千万不能用VisualSVN Server PowerShell,否则在还原Load的时候会发生错误E140001,具体参考http://stackoverf ...