DIV文字展示(省略...、超出滑动等) - 使用white-space

省略文字…

white-space: nowrap;  // 一行显示
overflow: hidden;  // 不允许滚动
text-overflow: ellipsis;  // 省略符号...

截图

超出滑动

white-space: nowrap; // 一行显示
overflow-x: scroll;// 允许x轴方向滚动

截图

书写格式保留、溢出white-space：pre

截图

书写格式保留、不溢出white-space：pre-wrap

截图

书写格式保留、不溢出、空白符合并成一个white-space：pre-line

截图

总结

1、一般使用在移动前端，文字太多展示不下需要滑动或者省略

w3school中对white-space的解释：white-space