overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
text-overflow: -o-ellipsis-lastline;

jquery写法:

$(".figcaption").each(function(i){
var divH = $(this).height();
var $p = $("p", $(this)).eq(0);
while ($p.outerHeight() > divH) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
});

[CSS备忘]多行文本省略号的更多相关文章

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

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

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

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

  3. css多行文本省略号问题

    已知,单行文本溢出内容用省略号代替,css代码如下: text-overflow: ellipsis; 溢出部分用...代替 white-space: nowrap; //强制在一行显示 overfl ...

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

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

  5. css多行文本省略号

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

  6. Css 备忘知识点

    1.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 2.HTML5的form如 ...

  7. CSS备忘

    垂直居中:           先height再ling-height,都设成一样高 span 垂直居中:vertical-align:50%设置外边距:           margin-top,m ...

  8. CSS备忘笔记

    一.CSS的概念 CSS(Cascading Style Sheet),中文译为层叠样式表,它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 二.CSS使用方式 使用CSS控制页面 ...

  9. CSS备忘-1

    CSS 可以通过以下方式添加到HTML中: 内联样式- 在HTML元素中使用"style" 属性 内部样式表 -在HTML文档头部 <head> 区域使用<sty ...

随机推荐

  1. angularjs 路由回退,返回到上一个路由

    在现阶段比较流行的angularjs框架中:路由是一个比较重要的应用:angularjs的单页面是其强大功能之一: 所有的页面其实就只是在一个页面就实现的:angularjs通过对路由的控制来进行页面 ...

  2. openstack私有云布署实践【8.1 身份认证keystone的API创建(科兴环境)】

    其中一台controller上面加入环境变量,我选kxcontroller1,关注的是endpoint的名称不一样,其它创建的参数与测试环境一致 export OS_TOKEN=venicchina ...

  3. 距离VR时代的真正到来还有多久?

    2016年被称为是VR元年,各大VR设备商的宣传攻势铺天盖地,众VR产品看的人眼花缭乱.随着平民化进程不断推进以及渗透率的提升,VR成为近两年来最引人关注的焦点,在众多领域的共同作用下,VR时代是否即 ...

  4. Zookeeper,Kafka,Spark关系

    Kafka中ZooKeeper的用途 正如ZooKeeper用于分布式系统的协调和促进,Kafka使用ZooKeeper也是基于相同的原因.ZooKeeper用于管理.协调Kafka代理.每个Kafk ...

  5. hdu5976贪心乘法逆元

    hdu 5976 Detachment题目连接 题意: 给定一个自然数x,让你给出一种拆分方式n=a1+a2+...(ai≠aj),使得每个小部分的乘积s=a1*a2*...最大 解题思路: 我们要乘 ...

  6. 第 2 章 Node.js 中的交互式运行环境 —— REPL

    本章内容包括: 如何使用REPL运行环境以及如何在该运行环境中测试各种JavaScript表达式. 如何定义并启动REPL运行环境. Node.js 框架中为REPL运行环境提供了哪些命令以及这些命令 ...

  7. Ubuntu 12.04 修改键盘映射

    背景: (1) 我的笔记本G450上,Page_up/Page_down键分别和Home/End在同一个键位上,需要同时按住Fn键才能敲出Home/End (2) 习惯用Vim的同志都有这个感觉,Es ...

  8. Oracle新实例创建

    http://blog.itpub.net/29519108/viewspace-1443918/ 刚开始创建时,千万别点容器数据库,不然后面新建用户时,用户名前得加C##. 常用命令: sqlplu ...

  9. MediaPlayer的错误列表速查(android)

    public static final int MEDIA_ERROR_IO Added in API level 17 File or network related operation error ...

  10. JQuery笔记(一)jq的使用方法

    我用的jq版本是支持pc版为主的最高1版本里最高的1.124版本 官网的链接是只有最新的3下载,我把我在官网下载的jq代码链接发出来,如下 点我获取jq代码 和js不同的是,jq开发者封装了一些方法 ...