已知,单行文本溢出内容用省略号代替,css代码如下:

text-overflow: ellipsis;    溢出部分用...代替
white-space: nowrap; //强制在一行显示
overflow: hidden;//溢出隐藏

 今天刚好遇到关于多行文本溢出,超出部分用...代替的问题,查找了一些资料。原文参考页面底部的链接

1:WebKit浏览器或移动端的页面

需要使用webkit私有属性,css草案中没有,因此不是标准的css属性。css代码如下

display: -webkit-box; //作为弹性盒子模型显示
-webkit-box-orient: vertical; //设置子元素的排列方式
-webkit-line-clamp:2; //块元素显示文本行数
over-flow:hidden;
text-overflow: ellipsis;

2: 用包含...的元素模拟

p {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
p:after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}

  需要注意的是:1:设置hight是line-hight的整数倍,以免文本在盒子下方溢出时,露出部分残字:

2:伪类:after设置为position:absolute定位,目的是让插入的背景图片覆盖在文本框右下角,模拟溢出假象。可以直接设置background-color替换该背景图。

3:IE6/7不能读content内容,可用span标签<span>...</span>模拟;

还有两款小插件:

jQuery插件-jQuery.dotdotdot与Clamp.js没有使用

原文参考http://www.111cn.net/cssdiv/css/67208.htm

css多行文本省略号问题的更多相关文章

  1. css多行文本省略号(...)

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现单行文本省略 <!DOCTYPE html ...

  2. css多行文本省略号

    适用于内核为webkit的浏览器: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflo ...

  3. CSS 设置多行文本省略号 ...

    CSS 设置多行文本省略号 ... .box{ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: ...

  4. 多行文本省略号的实现.html

    多行文本省略号的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. [CSS备忘]多行文本省略号

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

  6. 多行文本省略号样式失效丢失,以及控制台显示autoprefixer警告'Autoprefixer applies control comment to whole block, not to next rules.'

    问题现象   使用webpack压缩打包vue项目,遇到一个问题,文本多行显示省略号的关键css语句-webkit-box-orient: vertical;莫名其妙丢失失效了.查阅资料,有不少人提出 ...

  7. 微信小程序之多行文本省略号

    最近在捣鼓小程序,期间遇到的问题,踩过的坑,也是在网上各种搜.这里也说下我解决的问题,方便大家. 在小程序首页显示文本列表的时候,为了美观,不希望把所有的文本都显示出来,希望是显示前几行(比如前3行, ...

  8. css多行文本垂直居中问题研究

    css多行文本垂直居中问题研究 <body> <h2>垂直居中对齐</h2> <style> *{margin:0; padding:0;} div { ...

  9. css 多行文本的溢出显示省略号(移动端)

    多行文本的溢出显示省略号(移动端) 一.单行文本的溢出显示省略号(通用) .mui-ellipsis { overflow: hidden; /*规定当文本溢出包含元素时发生的事情*/ white-s ...

随机推荐

  1. EOS -- 一种灵巧的系统运行跟踪模块

    EOS到底是什么词的缩写,我猜应该是Error of System.最早接触它,是在UT那会.不过那会它是被设计成一个很大的数组,也没有被包含调用函数和行号,又或是时间,只是些计数.编码时,加减一个E ...

  2. P1906联合权值

    描述 无向连通图 G 有 n 个点,n-1 条边.点从 1 到 n 依次编号,编号为 i 的点的权值为 WiWi, 每条边的长度均为 1.图上两点(u, v)的距离定义为 u 点到 v 点的最短距离. ...

  3. 简单的导航viewpager

    下载PagerSlidingTabStrip        https://github.com/astuetz/PagerSlidingTabStrip 主界面: public class Main ...

  4. android TCP 客户端(仅接收数据)

    配合log4net使用,用来接收调试信息.因此,此客户端只管通过TCP接收字符串数据,然后显示在界面上. 接收TCP数据 try { Socket s = new Socket("192.1 ...

  5. vb---输入模式之文本输入与二进制输入区别

    使用 VB6 MSCOMM 控件 进行二进制收发 发布时间:2012-01-10 12:12:01 技术类别:嵌入式     MSCOMM 控件是用于串口通信的,使用方便.在VB中,这个串口控件缺省是 ...

  6. GCD笔记

    GCD笔记http://www.cocoachina.com/applenews/devnews/2013/1210/7506_2.html1. 全称Grand Central Dispatch2. ...

  7. Node.js系列之node.js初探

    官方介绍:Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable n ...

  8. VS2012配置使用ICE通信接口

    1.下载安装Ice-3.5.1.msi http://www.zeroc.com/download.html 2.添加安装路径到环境变量path,D:\Program Files (x86)\Zero ...

  9. WebApi Post提交报错 调试无法进入对应action函数

    调试发现有长内容或者是特殊字符就报错,确定是服务端验证的问题 需要 在配置文件 <system.web> 中添加<httpRuntime  requestValidationMode ...

  10. 开始VS 2012中LightSwitch系列的第4部分:太多信息了!使用查询来排序和筛选数据

    [原文发表地址]  Beginning LightSwitch in VS 2012 Part 4: Too much information! Sorting and Filtering Data ...