超出N行文本，以...显示

.text {display: -webkit-box;-webkit-line-clamp: 3; // 行数-webkit-box-oritent: vertical;  // 方向overflow: hidden;text-overflow: ellipsis;
}

超出N行文本，用渐变解决

.text {position: relative;overflow: hidden;line-height: 1.2em;height: 3.6em; /* exactly three lines */
}.text:after {content: "";text-align: right;position: absolute;bottom: 0;right: 0;width: 20%;height: 1.2em;background: linear-gradient(to right,rgba(255, 255, 255, 0),rgba(255, 255, 255, 1)80%);
}

移动端去除点击边框

.text {-webkit-tap-highlight-color: transparent;
}

转载于:https://www.cnblogs.com/huxiaoyun90/p/8535251.html

css 超出N行文本如何处理相关推荐

css超出一行省略号:text-overflow和white-space超出隐藏显示省略号
css超出一行省略号:text-overflow和white-space超出隐藏显示省略号通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下 ...
css超出一行添加省略号属性
css超出一行添加省略号属性:text-overflow和white-space 转自:http://caibaojian.com/css-white-space.html 通过使用text-over ...
css 超出显示省略号
单行超出显示省略号 .box{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100px;} 多行超出显示省略号 ...
css 超出文本省略号
css 超出文本省略号以及不生效解决办法! 1. 单行文本超出隐藏省略号实现方法: overflow: hidden;text-overflow:ellipsis;white-space: ...
史上最全css超出隐藏文章单行多行兼容
css超出隐藏关键属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不 ...
css之多行文本输出
css之多行文本输出需求本小白拿着设计师给的带标注的设计稿,看到简介标注为只能显示3行文本,多于3行显示3行,本准备采取字符串截取蒙混过关(不能原谅的事情是对自己没有要求,简直没有下限),后查看了 ...
JS CSS 超出字符省略号，获取字符串实际所占长度，显示文字提示tooltip
CSS 超出字符省略号 .a{white-space: nowrap;overflow: hidden;text-overflow: ellipsis; } JS获取字符串实际所占长度 compute ...
css 超出一行显示... 超出多行显示...
一定要设置宽度,当然,如果你的盒子内容就是占满一行,当我没说 1,css超出一行用点表示 white-space:nowrap; overflow:hidden; text-overflow:elli ...
css超出显示...
css超出显示- 必须指定一个宽度单行 overflow: hidden; //超出的文本隐藏 text-overflow: ellipsis; //溢出用省略号显示 white-space: no ...
css超出隐藏变成...
1,css超出一行用点表示 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 2,css超出二行用点表示 overflow:hi ...

css 超出N行文本如何处理

超出N行文本，以...显示

超出N行文本，用渐变解决

移动端去除点击边框

css 超出N行文本如何处理相关推荐

最新文章

热门文章