我们现在有一个盒子，盒子里装很多的文字

1 单行文本溢出用省略号表示

我们要搞三步

强制一行显示文本 white-space:nowrap;
- 如果设置为normal会自动换行，normal是默认值
超出部分隐藏 overflow:hidden;
用省略号代替超出部分 text-overflow:ellipsis;
- ellipsisi是省略号的意思，如果想用别的符号可以查一下text-overflow跟的值

我们现在把上面三行写上去

效果是这样的

2 多行文本溢出用省略号表示

使用多行文本溢出兼容性不是很好，只支持webKit内核浏览器，所以我们仅做了解就可以了，它是这样写的，我们把盒子搞高一点效果更明显一点

display: -webkit-box; 弹性伸缩盒子模型显示，以前我们是块展示，现在转变为弹性伸缩盒子
-webkit-line-clamp:2; 省略号出现在哪一行，我们这里让他出现在第二行
-webkit-box-orient:vertical; 设置或检索伸缩盒子对象的子元素排列方式，我们现在设置的是垂直排列

效果是这样的

所以我们要使用多行省略的时候，要把盒子尺寸卡好，不要让盒子再显示第三行

在IE中是不生效的

在后端可以控制这个盒子显示多少个字，如果在后端修改就没有兼容性问题了

20.溢出文本用省略号表示相关推荐

CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）
CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转) html代码: <div> <p><span>CSS Web Design 我爱CSS-Web标 ...
css 控制溢出文本显示省略号效果
同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果: 转载于:https:/ ...
单行溢出文本显示省略号的方法（兼容IE FF）
转自: http://blog.onlygrape.com/oneway-overflow/229 为了更符合实际,我用一个div装起要调试的内容,并为这个div定义一个宽度. 例如: div{wi ...
CSS基础：text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
4要素: width: 125px; //宽度必须 text-overflow: ellipsis/clip; //省略号或裁剪: white-space: nowrap;//强制内容在一行显示; ...
datagrid 溢出文本显示省略号
.datagrid-cell, .datagrid-cell-group, .datagrid-header-rownumber, .datagrid-cell-rownumber{ -o-text- ...
CSS基础:text-overflow:ellipsis溢出文本的显示样式
语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切 (clip这个参数是不常用的!) ellipsis : ...
div文字溢出自动加省略号（…）
CSS3属性之五:text-overflow 语法: text-overflow : clip | ellipsis 取值: clip: 不显示省略标记(...),而是简单的裁切. ellipsis: ...
HTML超出文本显示省略号...[text-overflow]
需要对div或者span同时应用Css: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 即可实现所想要得到的溢出文本显示省略 ...
全局mixin封装文本溢出隐藏显示省略号
全局mixin封装文本溢出隐藏显示省略号 @mixin ellipsis2($line) {display: -webkit-box;overflow: hidden;text-overflow: e ...
css溢出文本省略号
溢出文本省略号单行文本省略需要满足三个条件强制一行内显示文本 white-space:nowrap; 溢出部分隐藏 overflow:hidden; 文字用省略号代替超出部分 text-over ...

20.溢出文本用省略号表示

1 单行文本溢出用省略号表示

2 多行文本溢出用省略号表示

20.溢出文本用省略号表示相关推荐

最新文章

热门文章