CSS文本超过两行用省略号代替
1、只显示一行,超出部分用省略号
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
2、只显示两行(或多行),超出部分用省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
// 控制行数
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
CSS文本超过两行用省略号代替的更多相关文章
- 超过两行显示省略号 -webkit-line-clamp、-webkit-box-orient vue打包后不起作用
为了实现两行显示缩略显示,但是本地是可以显示,打包后不起作用 word-break: break-all; text-overflow: ellipsis; display: -webkit-box; ...
- css文本超出隐藏显示省略号
p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如 ...
- CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
- css文本强制两行超出就显示省略号,不显示省略号
1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...
- css文本溢出隐藏显示省略号(单行+多行)
文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法. 一. 单行文本不换行,并将超出文本隐藏 .box-content{ ove ...
- #CSS 文本溢出部分显示省略号
单行结尾溢出: 用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览. width:300px;overflow: hidden; text-overfl ...
- css文本超出部分用省略号表示
以前我在面试中遇到过这个问题,当时没答上来,现在回答一下: 1.设置三个属性: overflow:hidden (超出部分隐藏) white-space:nowrap (强制不换行) tex ...
- CSS文本溢出,显示省略号(...)
方式1:这种方式就是必须要跟width搭配使用,当你使用的display:flex; 的时候可能会影响样式 width: 200px; overflow: hidden; /*超出部分隐藏*/ tex ...
- css 文本超出范围显示省略号
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- web前端学习(四)JavaScript学习笔记部分(8)-- JavaScript瀑布流
index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- phpstudy安装好之后mysql无法启动(亲测可行)
安装好phpstudy后,Apache可以启动,Mysql无法启动. 尝试解决办法:可能是之前已经装过Mysql,要把系统服务里面的MySQL删除,留下MySQLa服务. 在cmd命令行下输入:sc ...
- centos6.5 zabbix2.2 亲测安装
因为需要做测试,调试.需要安装zabbix. 然后自己新弄了一个 centos6.5 minimal版本,从头来了一遍. 1.先安装LAMP的环境还有一些基本环境. yum -y install g ...
- Javascript-选择器集合调用方法
<script type="text/javascript"> function uu(namePd) { //判断id var reId = new RegExp(/ ...
- 模拟7题解 T2visit
T2 visit [组合数学][中国剩余定理] 一场考试难得见两个数学题 本来想矩阵快速幂,显然空间复杂度不行,主要是没时间,就没打 正解: 首先推波式子 1.$C_{t}^{k}$ 在t步中总 ...
- Thinkphp js、css压缩类minify
说明:Minify 是用PHP5开发的应用,通过遵循一些Yahoo的优化规则来提高网站的性能.它会合并多个CSS或者JavaScript文件,移除一些不必要的空格和注释,进行gzip压缩,并且会设置浏 ...
- PHP数据加密和解密
encrypt.php <?php /** * Passport 加密函数 * * @param string 等待加密的原字串 * @param string 私有密匙(用于解密和加密) * ...
- IUAP--单点登录
登录组件: 提供统一的登录组件 身份.证明验证身份 支持多种身份标识,用户名.邮箱.手机号 支持多个域,从与得到用户响应的角色,权限进行验证用户时候能进行操作. 支持会话管理和安全管理 支持多种验证策 ...
- ConcurrentModificationException解决办法
package test.my.chap0302; import java.util.ArrayList; import java.util.Iterator; import java.util.Li ...
- 移动端的touch事件(一)
如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP,这个页面上肯定是有很多可点击区域的,如果用户触摸到了那些可点击区域怎么办呢?? 诸如智能手机和平板电脑一类的移动设备通常会有 ...