单行文本溢出显示省略号

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. drf分页组件补充

    drf偏移分页组件 pahenations.py from rest_framework.pagination import LimitOffsetPagination class MyLimitOf ...

  2. Handler机制中的消息队列

    --> 学习自蘑菇街大佬 Handler机制可以看成是一个消息阻塞队列,当有消息时立即处理消息,没有消息时则阻塞.在Android系统中APP启动后很快进入死循环,不断读取MessageQueu ...

  3. 一劳永逸的解决AFNetworking3.0网络请求问题

    AFNetworking在iOS网络请求第三方库中占据着半壁江山,前段时间将AFNetworking进行了3.0版本的迁移,运用面向对象的设计将代码进行封装整合,这篇文章主要为还在寻找AFNetwor ...

  4. CSS 双飞翼布局

    10 Jul 2016 » CSS 双飞翼布局:总共分三栏,左侧栏Left,中间主栏Main,右侧栏Right 第一步,建立三个div,不过注意,中间Main需要加一个wrap div. 整个结构看起 ...

  5. Android多模块混淆的问题

    Android在多模块或者组件化的时候,关于混淆的管理,一般常见的做法就是两条. 把所有的混淆规则规则都放在app模块下面,由app统一管理.这样就会有一个问题,就是到会导致混淆规则的冗余. 由mod ...

  6. SYC极客大挑战部分题目writeup

    Welcome 复制黏贴flag即可 我相信你正在与我相遇的路上马不停蹄 关注微信工作号回复"我要flag"即可获得flag 代号为geek的行动第一幕:毒雾初现 发现flag为摩 ...

  7. Pom.xml的依赖自动生成

    1.第一种用引入jar包的方法 网盘链接:https://pan.baidu.com/s/10HNjNeZc1d5QrFNtvLPWBA 提取码:oako 以上是整个文件直接用idea打开即可 imp ...

  8. 达拉草201771010105《面向对象程序设计（java）》第六周学习总结

    达拉草201771010105<面向对象程序设计(java)>第六周学习总结 第一部分:理论知识 1.类.超类和子类 类继承的格式: class 新类名extends已有类名一般来说,子类 ...

  9. java ThreadPoolExecutor初探

    导读:线程池是开发中使用频率比较高的组件之一,但是又有多少人真正了解其内部机制呢. 关键词:线程池 前言 线程池是大家开发过程中使用频率比较高的组件之一,但是其内部原理又有多少人真正清楚呢.最近抽时间 ...

  10. 如何优雅地删除 Linux 中的垃圾文件

    不知道大家是否也跟我一样,是一只要把的自己电脑文件安排的条理有序,把没用的文件会及时删掉的程序猿呢?如果是的话,那么我们可以愉快地探讨下文章的内容.如果不是的话,你也可以留下来凑凑热闹嘛(>-& ...