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. Writing clean code is what you must do in order to call yourself a professional.

    Clean Code  A Handbook of Agile Software Craftsmanship

  2. iOS用AFN上传图片到java后台

    -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { AFHTTPSessionMana ...

  3. 第17章 使用PHP和MySQL实现身份验证

    1.对密码进行加密:sha1(string str,bool raw_output) //将返回一个40个字符的伪随机字符串,若raw_output为true,着得到一个20个字符的二进制字符串数据 ...

  4. C#-实验3

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  5. 消息队列 RabbitMQ 与 Spring 整合使用

    一.什么是 RabbitMQ RabbitMQ 是实现 AMQP(高级消息队列协议)的消息中间件的一种,最初起源于金融系统,用于在分布式系统中存储转发消息,在易用性.扩展性.高可用性等方面表现不俗.消 ...

  6. bzDemo

    <Public> <property name="Types"> <get/> </property> <method nam ...

  7. EasyUI DataGrid 添加 Footer

    做后台管理界面时,EasyUI 的 DataGrid 经常会被用到,有时候一些总的统计数据不合适放在数据表格里,需要单独显示,这时候就可以放在Footer中显示而不必另外布局. 该怎么给 DataGr ...

  8. 关于在mfc中cstring转为float和ini

    CString str1,str, str2; GetDlgItemText(IDC_EDIT1, str1); GetDlgItemText(IDC_EDIT2, str2); UINT value ...

  9. extjs 6.2 helloworld

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 二.创建maven工程及下载需要的jar包

    1.使用Eclipse的Maven插件来创建一简单的Maven项目 步骤:打开新建项目对话框,选择Maven Project(File->New->Object->Maven-> ...