单行文本和多行文本的省略号

一、单行文本的溢出显示省略号用text-overflow:ellipsis属性来，需要加宽度width属来兼容部分浏览。
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

二、多行文本省略：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

单行文本和多行文本的省略号相关推荐

CSS单行文本以及多行文本溢出显示省略号解决方案
CSS单行文本以及多行文本显示省略号解决方案文章目录 CSS单行文本以及多行文本显示省略号解决方案单行文本溢出显示省略号多行文本溢出显示省略号第一种效果:仅显示3行文本溢出部分显示省略号第二 ...
HTML技巧篇：如何让单行文本以及多行文本溢出显示省略号(…)
文章目录 HTML技巧篇:如何让单行文本以及多行文本溢出显示省略号(-) 一.单行文本溢出显示省略号核心css语句: 二.多行文本溢出显示省略号核心css语句: 效果图: 总结 HTML技巧篇:如 ...
单行文本和多行文本溢出显示省略号
1.单行文本溢出显示省略号首先需要设置宽高 overflow: hidden; /*超出部分隐藏*/ text-overflow: ellipsis; /* 超出部分显示省略号 */ white-s ...
单行文本与多行文本省略文本
一.单行文本省略 1.text-overflow:ellipsis;该属性用于当文本溢出的时候用省略号的方式显示.它还有一个属性值是clip(溢出部分直接裁剪掉). 2.overflow:hi ...
css 单行文本和多行文本换行
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
单行文本和多行文本溢出以省略号显示方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
单行文本省略号和多行文本省略号
1.单行文本省略号 overflow:hidden; //多余的部分隐藏 white-space:nowrap; //让文字强制一行显示 text-overflow:ellipsis; //多余的部分 ...
单行文本溢出省略号，多行文本溢出省略号，多行文本折行(可用)
1.单行文本溢出- overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 2.多行文本溢出- overflow: hidden; ...
CSS —— 单行和多行文本实现省略号
CSS -- 单行和多行文本实现省略号一.单行文本单行文本需要添加固定宽度以兼容部分浏览器,像小程序.微信浏览器等,建议添加. width: 200px; text-overflow: ellip ...

单行文本和多行文本的省略号

单行文本和多行文本的省略号相关推荐

最新文章

热门文章