`单行文本隐藏`
width: 300px;
/* 1. 溢出省略号显示 */
white-space: nowwarp;//nomal(文本换行) nowwarp (不换行)
/* 2.溢出的部分隐藏起来 */
overflow: hidden;
/* 3. 文字溢出的时候用省略号来显示 */
text-overflow: ellipsis; // clip(直接截断),ellipsis(省略号表示)
`多行文本隐藏`
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
总结:
共:有宽度,超出隐藏,超出用什么显示
异:
- 不换行
- 换行,显示区域内,有大小,设置排列方式