在网页设计的过程中 ， div是经常利用的标签 ， 那么 ， 若何设置才能让div中的文字 ， 主动换行或者强制不换行呢？
需要这些哦
vscode
方式/
1【如何设置才能让div自动换行 强制不换行】打开vscode ， 建立一个测试页面 ， 在测试页面中 ， 添加一个宽度=300px的div ， 同时添加div的红色边框 。 此处设置固定宽度和边框 ， 是为了更好的演示换行与不换行
文章插图
2在div标签的内部 ， 添加一些测试的文字 ， 这些文字可以随便添加 ， 仅仅只是演示罢了 。 文字不要太少 ， 起码要占有两行的空间
文章插图
3在浏览器中打开测试页面 ， 可以看到默认div内部的文字就主动换行了 。 是以 ， 在没有设置强制不换行的环境下 ， 让其主动换行 ， 不需要额外的设置
文章插图
4若是想要div内部的文字强制不换行 ， 利用下面这个css样式即可 。 white-space: nowrap;
文章插图
5在浏览器中 ， 再次打开测试页面可以看到 ， div内部的文字强制没有换行了 ， 并且占用的宽度已经跨越了div预设的宽度了
文章插图
6上面的结果 ， 文字固然强制没有换行了 。 只不外仍是不太都雅 ， 若是想要让文字在div的宽度内强制不换行 ， 超出的内容利用滚动条 ， 就再加上一个样式
overflow: auto;
文章插图
7在浏览器中再次打开测试页面 ， 就能看到文字没有跨越div预设的宽度了 ， 也没有换行 ， div宽度显示不敷的文字 ， 主动有了滚动条
文章插图
以上内容就是如何设置才能让div自动换行 强制不换行的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- Excel如何把同一列的内容拆分为两列？
- excel表格怎么筛选数据如何操作
- 该如何照顾年老的鼠鼠
- 如何饲养和选购黄腹山雀
- 如何帮兔子洗澡
- 如何让兔兔吃的健康
- 如何自制居家减肥茶？
- 苹果4越狱教程
- 网易云音乐如何设置缓存大小，如何清除缓存
- 支付宝如何将扫一扫添加手机桌面