首先，div部分

 <body>

         <div>多行的显示该如何解决呢，后面经过一番google后，我找到了chrome的一个API可以解决上面提到的需求-webkit-line-clamp</div>

     </body>

然后，css部分

1.单行

   div {

     width: 150px;

     overflow: hidden;

     text-overflow: ellipsis;

     display: -webkit-box;

     -webkit-line-clamp: 2;

     -webkit-box-orient: vertical;

     background-color: lightcoral;

 }

2.多行

主要是用到了-webkit-line-clamp。由于是-webkit，很幸运的移动端的页面可以做兼容。

pc端的话，Firefox、IE、edge不可用，chrome、safari、opera可用。

CSS换行文本溢出显示省略号，多行的更多相关文章

  1. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  2. CSS单行文本溢出显示省略号

    此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...

  3. css实现文本溢出显示省略号

    看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...

  4. CSS文本溢出显示省略号

    项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...

  5. CSS和JS实现文本溢出显示省略号

    本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...

  6. CSS3文本溢出显示省略号

    CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...

  7. 文本溢出显示省略号，CSS未加载时a标签仍可用处理方法

    一.文本溢出打点 (1)单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; (2)多行文本 overflow : h ...

  8. WEB-CSS实现单行（多行）文本溢出显示省略号

    //单行文本溢出部分隐藏显示省略号...overflow: hidden; text-overflow:ellipsis; white-space: nowrap; /** n 行文本溢出部分隐藏显示 ...

  9. 如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)

    如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...

随机推荐

  1. 《Linux企业应用案例精解(第2版)》新书发售啦

    本书在出版当年就获得了不错的销量,同时被中国科学院国家科学图书馆.中国国家图书馆.首都图书馆.清华大学.北京大学等上百所国内综合性大学图书馆收录为馆藏图书,在IT业界赢得了良好的口碑.随后2012年年 ...

  2. 最新原创：Power8伴随云计算横空出世

    Power8伴随云计算横空出世 自从IBM将并不赚钱的x86服务器业务转手给联想之后,从此IBM便开始了硬件转型的新里程碑.伴随此事继续发酵的还有Power System Linux落户北京,从此IB ...

  3. 转——JAVA中calendar,date,string 的相互转换和详细用法

    package cn.outofmemory.codes.Date; import java.util.Calendar; import java.util.Date; public class Ca ...

  4. Centos Cacti 0.8.8g

    一.Cacti简介1. cacti是用php语言实现的一个软件,它的主要功能是用snmp服务获取数据,然后用rrdtool储存和更新数据,当用户需要查看数据的时候用rrdtool生成图表呈现给用户.因 ...

  5. jenkins配置自动发送邮件

    1.开通QQ的SMTP服务,需要发一条短信,qq会给你一个密码(不是你的QQ邮箱密码哦) 2.安装 Email Extension Plugin 插件 3.进入系统管理--系统设置 3.1按照如下图设 ...

  6. git 忽视大小写

    git config core.ignorecase false http://stackoverflow.com/questions/3011625/git-mv-and-only-change-c ...

  7. 安装XMind

    XMind是一款思维导图软件.可编辑整理头脑中的想法,以使其脉络更加清晰. 在学习知识过程中,用这个工具也不错. 官方网站:  http://www.xmind.net 其它版本: http://ww ...

  8. phpstorm之端点跟踪

    如果在断点没有实时染色,首要请检查local与remote的代码文件的对应.

  9. MFC 获取图像的大小

    // 获致图像的大小 int CCImageDialog::GetImageSize(CSize& size, CString filename) { CImage image; image. ...

  10. HP工控机 G9 安装系统需注意

    HP工控机 G9 装系统需要:简单唠叨几句 1.F10 进配置,选择设置图标-选择存储图标-选择阵列卡图标-根据中间框提示制作riad(必须) 2.加载驱动 驱动直接复制到U盘根目录下,选择F11选择 ...