div或者p标签单行和多行超出显示省略号
单行文本溢出显示省略号
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标签单行和多行超出显示省略号的更多相关文章
- css文字单行/多行超出显示省略号...
css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设 ...
- Html中文字过多,单行超出和多行超出显示省略号
本博客主要介绍 前端开发中文本过多,以省略号显示. 效果如图: 单行: <!--单行--> <p class="pl">这个属 ...
- CSS文本单行或者多行超出区域省略号(...)显示方法
单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...
- css实现多行超出显示省略号?
可以实现,但是用的是-webkit-私有属性.我用js已经解决了.代码如下:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-over ...
- CSS3限,2行3行等文字在块元素显示的文字内容超出显示省略号
大家都知道文字超出一行显示省略号用css就可以搞定,但2行.3行等多行超出显示省略号有的人就不知怎么搞了,我用js做过一个文字判断有兴趣的可以看一下传送门,今天就来试验一下多行超出省略号 使用时注意浏 ...
- CSS 单行 多行文本溢出显示省略号
单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...
- CSS自己主动换行、强制不换行、强制断行、超出显示省略号
P标签是默认是自己主动换行的,因此设置好宽度之后,可以较好的实现效果,可是近期的项目中发现,使用ajax载入数据之后.p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,尽管攻克了问题.可是 ...
- CSS自动换行、强制不换行、强制断行、超出显示省略号
转自:https://blog.csdn.net/liuyan19891230/article/details/50969393 P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是 ...
- 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行,第二行省略号显示css方法
文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap; 强制文本不换行 折 ...
随机推荐
- unittest(20)- 自动更新表格中的测试数据(1)
# 直接给出第一个手机号,而不是从excel中取数据 from openpyxl import load_workbook from tools.read_config import ReadConf ...
- mac下查找某个文件,which、whereis、find、locate
which命令只是根据PATH环境变量查找. whereis命令只是根据标准可执行文件路径进行查找. 例如: 如果要找的不是可执行文件,而且想在整个系统上找,怎么办? find / -name xxx
- python Dom
Dom(Document) 称为:文档对象模型,是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.DOM把网页和脚本以及其他的编程语言联系了起 ...
- onbeforeunload事件兼容性操作
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Thomson Plaza里面的三家店以及水果大会
旅行应该是一个发现的过程,至少我是这么认为的.很多时候并不一定要到什么特别的地方,也可以感受到旅游的乐趣.我觉得只要能看到值得回味的东西就好了.而能回味的东西,往往是需要仔细地来品.像旅行社安排的那样 ...
- spring cloud实战 1-高可用注册中心
创建父maven项目 提交代码至GitHub 创建eureka-server-1 项目搭建两种方式: 父pom中继承spring-boot-starter-parent,子pom中直接结成父pom.该 ...
- HAProxy实现动静分离和负载均衡
由于电脑配置渣,带不动多台虚拟机,所以采用httpd虚拟主机的方式来实现 1 2 3 CentOS 6.7 httpd: 2.2.15 HAProxy: 1.5.4 主机规划 1 2 3 4 5 - ...
- 招聘,api、app、web自动化,性能,持续集成,其他
招聘: api接口自动化测试 app功能自动化测试 web功能自动化测试 性能测试 自动化平台与持续集成 其他
- React使用笔记2--创建登录组件
文章目录 最近在学习使用React作为前端的框架,<React使用笔记>系列用于记录过程中的一些使用和解决方法.本文记录搭建登录页面的过程. 根据产品规划划分模块 主要页面逻辑 在这里,本 ...
- C++扬帆远航——12(抓小偷)
/* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:zhaoxiaotou.cpp * 作者:常轩 * 微信公众号: ...