css单行文字和多行文字溢出隐藏

单行文字溢出隐藏步骤

1. 强制文字一行显示

 white-space: nowrap;

2. 将多余的文字隐藏

 overflow: hidden;

3. 将隐藏的文字使用省略号代替

 text-overflow: ellipsis;

多行文字溢出隐藏步骤

1. 强制文字一行显示

 white-space: nowrap;

2. 将多余的文字隐藏

 overflow: hidden;

3. 将隐藏的文字使用省略号代替

 text-overflow: ellipsis;

4. 如下属性用来辅助实现多行文字溢出显示省略号
5. 告诉浏览器你要显示多少行

 -webkit-line-clamp: 4;

6. 文字显示方式,默认水平

-webkit-box-orient: vertical;

7.将盒子转为弹性盒子

  display: -webkit-box;

注意

8.纯字母 默认字母是不会换行的需要添加

word-break: break-all;

还要加一个空格或者是回车