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. 第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据

    第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据 学习要点: 1.JSON语法 2.解析和序列化 前两章我们探讨了XML的结构化数据,但开发人员还是觉得这 ...

  2. sublime & atom 插件

    1. autofilename(sublime) autocomplete-paths (atom): 自动路径 2. autoprefixer: 自动添加前缀  : https://github.c ...

  3. ES 6 : 函数的扩展

    1. 函数参数的默认值 [ 基本用法 ] 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法. 上面的代码检查函数log的参数y有没有赋值,如果没有,则指定默认值为world.这种写法的 ...

  4. 【USACO】滑雪课程

    滑雪课程贝西去科罗拉多州去滑雪,不过还她不太会玩,只是个能力为 1 的渣渣.贝西从 0 时刻进入滑雪场,一到 T 时刻就必须离开.滑雪场里有 N 条斜坡,第 i 条斜坡滑行一次需要 Di 分钟,要求游 ...

  5. php学习笔记——文件(1)

    一.include和require 服务器端包含 (SSI) 用于创建可在多个页面重复使用的函数.页眉.页脚或元素. include (或 require)语句会获取指定文件中存在的所有文本/代码/标 ...

  6. childNodes属性 和 nodeType属性

    childNodes属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素的全部子元素的数组:element.childNodes 如果需要把某个文档的body元素的全体子元素检索出来.首先使 ...

  7. MATLAB的符号运算基础

    在数学运算中,运算的结果如果是一个数值,可以称这类运算为数值运算:如果运算结果为表达式,在MATLAB中称为符号运算,符号计算是对未赋值的符号对象(可以是常数.变量.表达式)进行运算和处理.MATLA ...

  8. mac下 使用 versions版本控制工具 修复游戏bug过程

    1,首先拥有游戏源代码文件,修复bug之前先使用versions工具进行更新: 2,查找指定的bug之前,先运行游戏,在源代码中觉得是bug的地方打个断点,然后运行游戏的对应有bug的地方,看是否会有 ...

  9. android studio修改项目包名

    公司项目都是用eclipse开发的,但是android studio开发已经是大势所趋了,所以在闲暇之余使用了一下androidstudio,这里对androidstudio更改项目包名做一下总结,因 ...

  10. IOS开发调整UILabel的行间距

    CGFloat heih = 20;   NSString * cLabelString = @"这是测试UILabel行间距的text.这是测试UILabel行间距的text.n 这是测试 ...