声明：此文章为转载（点击查看原文），如有侵权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. GBDT用于分类问题

    一.简介 GBDT在传统机器学习算法里面是对真实分布拟合的最好的几种算法之一,在前几年深度学习还没有大行其道之前,gbdt在各种竞赛是大放异彩.原因大概有几个 一:效果确实挺不错. 二:既可以用于分类 ...

  2. javascript 迭代与递归

    <script type="text/javascript"> // //原生js // window.onload = function(){ // var btn ...

  3. vue-router源码分析

    上一篇我们写了前端路由,这几天比较闲,抽空研究了vue.js官方路由的vue-router的实现. 本文主要是以vue-router2.7.0(https://github.com/vuejs/vue ...

  4. java中静态代码执行顺序

    1.Java中静态变量只能在类主体中定义,不能在方法中定义. 静态变量属于类所有而不属于方法. 2. 静态块:用static申明,JVM加载类时执行,仅执行一次 构造块:类中直接用{}定义,每一次创建 ...

  5. asp.net mvc url应用

    //url加密与解密string res1 = HttpUtility.UrlEncode("7Z2K5Lgk/iI="); //值是7Z2K5Lgk%2fiI%3d string ...

  6. asp.net mvc Htmlhelper简单扩展

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  7. Linux - openssl 加密

    openssl rand 15 -base64 # 口令生成 openssl sha1 filename # 哈希算法校验文件 openssl md5 filename # MD5校验文件 opens ...

  8. Python中crypto模块进行AES加密和解密

    #coding: utf8 import sys from Crypto.Cipher import AES from binascii import b2a_hex, a2b_hex class p ...

  9. 最新Linux系统Ubuntu16.04搭建HUSTOJ(LAMP环境)

    应该跟着下面的步骤就OK了吧! 1.升级软件库,更新软件 打开终端 输入 sudo apt-get update sudo apt-get upgrade 2.安装mysql5.7 (注意:mysql ...

  10. mysql 案例~mysql元数据的sql统计

    一 简介:今天我们来收集下提取元数据的sql 二 前沿: information_schema  引擎 memory 元数据收集表 三 sql语句: 1#没有使用索引的表统计 SELECT t.TAB ...