单行文字溢出隐藏步骤
- 强制文字一行显示
white-space: nowrap;
- 将多余的文字隐藏
overflow: hidden;
- 将隐藏的文字使用省略号代替
text-overflow: ellipsis;
多行文字溢出隐藏步骤
- 强制文字一行显示
white-space: nowrap;
- 将多余的文字隐藏
overflow: hidden;
- 将隐藏的文字使用省略号代替
text-overflow: ellipsis;
- 如下属性用来辅助实现多行文字溢出显示省略号
- 告诉浏览器你要显示多少行
-webkit-line-clamp: 4;
- 文字显示方式,默认水平
-webkit-box-orient: vertical;
7.将盒子转为弹性盒子
display: -webkit-box;
注意
8.纯字母 默认字母是不会换行的需要添加
word-break: break-all;
还要加一个空格或者是回车