如何设置才能让div自动换行强制不换行

在网页设计的过程中，div是经常利用的标签，那么，若何设置才能让div中的文字，主动换行或者强制不换行呢？

东西/原料

1
打开vscode，建立一个测试页面，在测试页面中，添加一个宽度=300px的div，同时添加div的红色边框。此处设置固心猿意马宽度和边框，是为了更好的演示换行与不换行
2
在div标签的内部，添加一些测试的文字，这些文字可以随便添加，仅仅只是演示罢了。文字不要太少，起码要占有两行的空间
3
在浏览器中打开测试页面，可以看到默认div内部的文字就主动换行了。是以，在没有设置强制不换行的环境下，让其主动换行，不需要额外的设置
4
若是想要div内部的文字强制不换行，利用下面这个css样式即可。white-space: nowrap;
5
在浏览器中，再次打开测试页面可以看到，div内部的文字强制没有换行了，并且占用的宽度已经跨越了div预设的宽度了
6
上面的结果，文字固然强制没有换行了。只不外仍是不太都雅，若是想要让文字在div的宽度内强制不换行，超出的内容利用滚动条，就再加上一个样式
overflow: auto;
7
在浏览器中再次打开测试页面，就能看到文字没有跨越div预设的宽度了，也没有换行，div宽度显示不敷的文字，主动有了滚动条