声明：此文章为转载（点击查看原文），如有侵权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. 基于windows server 2012 的微软桌面虚拟化实战教程

    http://abool.blog.51cto.com/8355508/1587489/ Windows Server2012 中的“远程桌面服务”服务器角色中就提供了允许用户连接到虚拟机.Remot ...

  2. golang变量声明

    func main() { var a1 int a1 = 1 var a = 1 b := 1 var c, d int c = 1 d = 1 var e, f = 1, 2 g, h := 1, ...

  3. Thread的setDaemon(true)方法

    定义:守护线程--也称“服务线程”,在没有用户线程可服务时会自动离开.优先级:守护线程的优先级比较低,用于为系统中的其它对象和线程提供服务. 设置:通过setDaemon(true)来设置线程为“守护 ...

  4. 02-MySQL的安装和配置

    1. 软件和环境 注:安装MySQL数据库的操作系统必须保证有.NET环境和VC运行库的支持.    下载地址:百度云网盘链接 2. MySQL服务器安装详细步骤 (1). 选择安装类型 这里我们选择 ...

  5. 拿webshell权限方法（一）

    概念 Webshell就是以asp,php,jsp或cgi等网页文件形式存在的一种命令执行环境,也可以将其称为一种网页后门. Access数据库拿webshell 首先看是否能找到网站漏洞进行网站的后 ...

  6. golang使用simplejson库解析复杂json

    cnblogs原创 golang自带的json解析库encoding/json提供了json字符串到json对象的相互转换,在json字符串比较简单的情况下还是挺好用的,但是当json字符串比较复杂或 ...

  7. DropEditText

    https://blog.csdn.net/jdsjlzx/article/details/46860563    https://github.com/qibin0506/DropEditText ...

  8. 数据库操作之整合Mybaties和事务讲解 5节课

    1.SpringBoot2.x持久化数据方式介绍          简介:介绍近几年常用的访问数据库的方式和优缺点 1.原始java访问数据库             开发流程麻烦           ...

  9. spring源码学习1

    1.下载源码: https://github.com/spring-projects/spring-framework中找到链接: git clone https://github.com/sprin ...

  10. vim 超强发行版

    推荐第一个: https://github.com/spf13/spf13-vim https://github.com/Spacevim/Spacevim https://github.com/JB ...