单行多行文本溢出(显示省略号)

width：value；
overflow:hidden;  
white-space：nowrap;
text-overflow：ellipsis;

1. width：value； 

就是设置宽度的具体值( 必需 )

2.overflow:hidden;  // 多余隐藏

overflow 可选的值 :

visible : 浏览器的默认值 , 多余的内容不会被修剪 , 会呈现在元素框之外

hidden : 多余内容隐藏

scroll : 多余的部分显示滚动条

auto : 自动 , 如果内容宽度大余容器宽度 , 会显示滚动条 , 否则不会显示滚动条

inherit : 继承父亲

3 . white-space：nowrap;    // 文本不折行

normal : 默认值 , 空白会被浏览器忽略 , 即在代码里的多个空格会合并为一个

pre : 空白保留 , 编辑器里几个空格都会呈现在页面上

nowrap : 文本不换行 , 文本会在同一行上显示 , 直到遇见<br/>标签

pre-wrap : 保留空白 , 遇到元素的边界会正常进行换行

pre-line:合并空白符序列，但是保留换行符；

inherit：规定应该从父元素继承White-space属性的值

4 . text-overflow : ellipsis // 多余的部分显示省略号

clip : 不显示省略号

ellipsis : 显示省略号 (只有在文本溢出且满足上面三个条件才会显示省略号)

多行文本显示省略号 : 

width:200px;        //宽度
display: -webkit-box;         // 变成弹性盒模型
-webkit-box-orient:vertical;         // 上下排列子元素 
-webkit-line-clamp:2;         // 两行文本
overflow:hidden;      //多余隐藏

但是注意他的兼容性不好 , 且不能设置大于文本的高度 .

 如果设置高度 , 且大于文本 , 会出现这种情况 :

 

转载于:https://www.cnblogs.com/Evaline/p/10796555.html