2021-09-14

今天碰到个问题，也可能太久没用了，完全忘记了，这里专门记录下

div里面内容长度不固定，但是可能超出规定的盒子长度。通常我们使用overflow去做一些处理：

overflow:visible 默认值。内容不会被修剪，会呈现在元素框之外。
overflow:hidden 内容会被修剪，超出内容内容是不可见。

overflow:scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

overflow:auto 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

overflow-x:auto 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容（横向滚动）。

overflow-y:auto 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容（纵向滚动）。

overflow-y:inherit 继承父元素的overflow属性。

需求：盒子宽度超出自动滚动查看

我设置代码如下：
overflow:auto并未生效 我看了好几遍，没什么问题。想了半天，一直以为是类名或者样式哪里起了冲突。突然我看到了自己的盒子用的是div。而元素在浏览器内有个属性：white-space 。

white-space：用来定义元素内的空白该如何处理。

div属性默认换行。因此overflow:auto并未起到作用。在这里，我们需要设置white-space属性的值，使div元素强制不换行。

white-space:nowrap：文本不会换行，会在在同一行上继续，直到遇到br标签为止。

至于white-space的其他值，可以去看css文档 这里就不一一说明了。之后在overFlow里面加入 white-space:nowrap; 问题解决 ；