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. ...
随机推荐
- soj114 中位数
题意:给你一个长度为2n-1的数组A,设Bi是A的1~2i-1的中位数.问打乱A,有多少种不同的B序列? 标程: #include<bits/stdc++.h> using namespa ...
- Python自学:第四章 在for循环结束后执行一些操作
# -*- coding: GBK -*- magicians = ['alice', 'david', 'carolina'] for magician in magicians: print(ma ...
- 云时代IDC自动化运维的几大神器
云时代IDC自动化运维的几大神器 2016年09月18日 10:27:41 天府云创 阅读数:1715 版权声明:本文为EnweiTech原创文章,未经博主允许不得转载. https://blog ...
- .net core, docker 在vs2019开发过程中的问题以及解决办法
.net core, docker 在vs2019开发过程中的问题以及解决办法 记录下来,帮助Ta人~ 1.vs调试,快Build完后提示Docker 端口:xxxx,xxxx,xxxx占用 解决办法 ...
- C++函数调用原理理解
空程序: int main() { 00411360 push ebp ;压入ebp 00411361 mov ebp,esp ;ebp = es ...
- ASP.NET的一些概念
简述实体框架(EF): EF是一种ORM工具,ORM表示对象关联映射. 在RDMS中,对象称为表格和列对象,而在.net中(面向对象)称为类,对象以及属性. EF提供了三种方式来实现项目: l 数据库 ...
- Celery - 异步任务 , 定时任务 , 周期任务
1.什么是Celery?Celery 是芹菜Celery 是基于Python实现的模块, 用于执行异步定时周期任务的其结构的组成是由 1.用户任务 app 2.管道 broker 用于存储 ...
- 网络安全系列 之 SQL注入学习总结
目录 1. sql注入概述 2. sql注入测试工具 3. sql注入防御方法 3.1 问题来源 3.2 防御方法 4. SQL注入防御举例 4.1 使用JDBC时,SQL语句进行了拼接 4.2 使用 ...
- USACO 2007 February Silver The Cow Lexicon /// DP oj24258
题目大意: 输入w,l: w是接下来的字典内的单词个数,l为目标字符串长度 输入目标字符串 接下来w行,输入字典内的各个单词 输出目标字符串最少删除多少个字母就能变成只由字典内的单词组成的字符串 Sa ...
- AutoIt自动化编程(2)【转】
注意:窗口标题和窗口文本参数总是对大小写敏感的. 1.等待窗口系列命令/函数 AHK和AU3都提供了用法类似的一组窗口等待命令/函数:WinWait/WinWaitActive/WinWaitClos ...