单行文本溢出显示省略号

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行文本显示省略号

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

但是你会发现有的浏览器设置上-webkit-box-orient: vertical; 不起作用

解决方式如下

/* autoprefixer: off */

  -webkit-box-orient: vertical; // 参考 https://github.com/postcss/autoprefixer/issues/776

  /* autoprefixer: on */
通过腻子来实现生效

div或者p标签单行和多行超出显示省略号的更多相关文章

  1. css文字单行/多行超出显示省略号...

    css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设 ...

  2. Html中文字过多，单行超出和多行超出显示省略号

    本博客主要介绍 前端开发中文本过多,以省略号显示. 效果如图:                单行: <!--单行--> <p class="pl">这个属 ...

  3. CSS文本单行或者多行超出区域省略号(...)显示方法

    单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...

  4. css实现多行超出显示省略号？

    可以实现,但是用的是-webkit-私有属性.我用js已经解决了.代码如下:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-over ...

  5. CSS3限,2行3行等文字在块元素显示的文字内容超出显示省略号

    大家都知道文字超出一行显示省略号用css就可以搞定,但2行.3行等多行超出显示省略号有的人就不知怎么搞了,我用js做过一个文字判断有兴趣的可以看一下传送门,今天就来试验一下多行超出省略号 使用时注意浏 ...

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

    单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...

  7. CSS自己主动换行、强制不换行、强制断行、超出显示省略号

    P标签是默认是自己主动换行的,因此设置好宽度之后,可以较好的实现效果,可是近期的项目中发现,使用ajax载入数据之后.p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,尽管攻克了问题.可是 ...

  8. CSS自动换行、强制不换行、强制断行、超出显示省略号

    转自:https://blog.csdn.net/liuyan19891230/article/details/50969393 P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是 ...

  9. 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行，第二行省略号显示css方法

    文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap;  强制文本不换行 折 ...

随机推荐

  1. Java程序、JSP以及JavaScript中如何判断某个字符串是否包含某个子串

    1.JSP str:原始字符串, subStr:要查找的子字符串 <c:if test="${fn:contains(str,subStr)==true}"> < ...

  2. 前端js代码以备不时之需

    //获取id元素信息let getId = (args) => { return document.getElementById(args);} //获取类名元素let getClassName ...

  3. unittest（22）- p2p项目实战（2）-http_request

    # 2. http_request.py import requests from learn_logging_5.write_log_class import MyLog my_logger = M ...

  4. Luogu_2876_[USACO07JAN]解决问题Problem Solving

    题目描述 过去的日子里,农夫John的牛没有任何题目. 可是现在他们有题目,有很多的题目. 精确地说,他们有\(P(1 \leq P \leq 300)\)道题目要做. 他们还离开了农场并且象普通人一 ...

  5. WiFi曝出安全漏洞几近“裸奔”：运营商能借机收割一波红利吗？

    ​    作为大众生活中不可或缺的基础架构,也是智能生活普及的推动性力量,运营商的重要性毋庸置疑.但无奈的是,一直以来运营商都似乎是站在了大众的"对立面".看似光鲜亮丽,但在壮观的 ...

  6. 烧钱时代终结！O2O还能玩啥花样？

    最终的最终,饱受亏损.烧钱玩补贴等争议的美团还是追随滴滴/快的.赶集/58的步伐,与大众点评愉快的在一起了!美团和大众点评作为O2O行业的领军企业,都因为不堪忍受持续地投入却不见回报的模式而不得不放低 ...

  7. 神州优车挂牌新三板！专车B2C对决C2C将愈发狂暴？

    近日,全国中小企业股份转让系统公告显示,神州优车已获准在新三板挂牌.神州优车作为神州专车的主营主体,此次挂牌新三板意味着神舟专车成功突围,成为"专车第一股".相比滴滴.Uber中国 ...

  8. VMware虚拟机各版本密钥

    VMware Workstation Pro 激活许可证 UY758-0RXEQ-M81WP-8ZM7Z-Y3HDA VF750-4MX5Q-488DQ-9WZE9-ZY2D6 UU54R-FVD91 ...

  9. Typescript 01 安装与使用

    ---恢复内容开始--- 一. 介绍 1. TypeScript 是由微软开发的一款开源的编程语言. 2. TypeScript 是 Javascript 的超级,遵循最新的 ES6.Es5 规范.T ...

  10. OpenFlow(OVS)下的“路由技术”

    前言 熟悉这款设备的同学,应该也快到不惑之年了吧!这应该是Cisco最古老的路由器了.上个世纪80年代至今,路由交换技术不断发展,但是在这波澜壮阔的变化之中,总有一些东西在嘈杂的机房内闪闪发光,像极了 ...