css 超出两行省略号,超出一行省略号
参考:https://www.cnblogs.com/yangguojin/p/10301981.html
超出一行省略:
p{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
超出2行省略:
p {
overflow:hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-box-align: start; //让内容居左
/*! autoprefixer: off */
-webkit-box-orient:vertical;
/* autoprefixer: on */
-webkit-line-clamp:2;
}
注:两行注释必须要!因为 webpack打包后-webkit-box-orient会被移除,autoprefixer会自动移除老式过时的代码,所以需要添加注释关闭autoprefixer。如果有清除注释的插件,将该插件设为false,否则不生效。
但当css样式为外部引入时,这样写会报警告:Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.
需修改为:
/*! autoprefixer: ignore next */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
css 超出两行省略号,超出一行省略号的更多相关文章
- CSS div内文字显示两行,超出部分省略号显示
1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...
- JS控制文字只显示两行,超出部分显示省略号
由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...
- css把超出的部分显示为省略号的方法兼容火狐
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- css 超过一行省略号
//超过一行省略号 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; //超过两行省略号 overflow: hidden ...
- CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...
- 翻译:如何使用CSS实现多行文本的省略号显示
本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添加译者的一些感想,请各位读者谅解. 合理的 ...
- css 文本两行显示,超出省略号表示
重点:text-overflow: ellipsis;只对display:inline:起作用 例子: <span class="a">我说说<b class= ...
- css文本强制两行超出就显示省略号,不显示省略号
1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...
随机推荐
- Window sevice +OWIN+webapi
webapi正常都托管在iis上,这里引入owin,将其托管在window服务上. 第一步:创建一个服务,这里就不多描述. 第二步:引入OWIN 2.1引入bll 2.2加入api路由配置 publi ...
- HTML加载顺序
一.js执行顺序 //1. 外部引入的js文件,会异步下载并且执行(<script>块中的语句),根据引入的位置会在不同时刻执行 //2.$().ready(function() {}) ...
- prometheus配置详情
https://prometheus.io/docs/prometheus/latest/configuration/configuration/ 下面监控宿主机和容器的内存,CPU,磁盘等状态 gr ...
- duilib教程之duilib入门简明教程18.其他
一.超链接按钮 代码很简单,参见360Demo: <Button text="{u}{a}求助{/a}{/u}" showhtml="true&qu ...
- 在idesktop中加载天地图服务并叠加矢量数据
在天地图中加载天地图在线服务,然后叠加上我们制作的专题图,可以查看制图效果. 以加载山东省天地图矢量地图服务为例: 服务地址: http://www.sdmap.gov.cn/tileservice/ ...
- Laravel依赖
首先有个接口 interface Visit { public function go (); } 然后有三个类Leg,Car,Train class Leg implements Visit { p ...
- ps快速将白底图片变为透明图片
方法一: 如果图层有锁图标,则要点击它,然它消失.然后选中魔棒工具,然后点击图片上要透明的区域,按下backspace键即可. 方法二: 转载自:https://blog.csdn.net/sunyi ...
- tomcat部署war和war exploded区别和intellij idea部署项目的位置
tomcat部署war和war exploded区别和intellij idea部署项目的位置 来自https://blog.csdn.net/u013041642/article/details/7 ...
- <day006>bootstrap的简单学习 + 轮播图
任务1:bootstrap的简单学习 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...
- USACO 2013 January Silver Painting the Fence /// oj23695
题目大意: 输入n,k :n次操作 找到覆盖次数在k及以上的段的总长 一开始位置在0 左右活动范围为1-1000000000 接下来n行描述每次操作的步数和方向 Sample Input 6 22 R ...