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

 时间:2024-10-14 21:09:05

1、打开vscode,创建一个测试页面,在测试页面中,添加一个宽度=300px的div,同时添加div的红色边框。此处设置固定宽度和边框,是为了更好的演示换行与不换行

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

2、在div标签的内部,添加一些测试的文字,这些文字可以随便添加,仅仅只是演示而已。文字不要太少,最少要占据两行的空间

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

3、在浏览器中打开测试页面,可以看到默认div内部的文字就自动换行了。因此,在没有设置强制不换行的情况下,让其自动换行,不需要额外的设置

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

4、如果想要div内部的文字强制不换行,使用下面这个css样式即可。white-space: nowrap;

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

5、在浏览器中,再次打开测试页面可以看到,div内部的文字强制没有换行了,而且占用的宽度已经超过了div预设的宽度了

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

6、上面的效果,文字虽然强制没有换行了。只不过还是不太好看,如果想要让文字在div的宽度内强制不换行,超出的内容使用滚动条,就再加上一个样式overflow: auto;

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

7、在浏览器中再次打开测试页面,就能看到文字没有超过div预设的宽度了,也没有换行,div宽度显示不够的文字,自动有了滚动条

如何设置才能让div自动换行 强制不换行
  • 干锅鸡翅的做法
  • 国考没带身份证怎么办
  • 二年级歇后语藏不住的上一句是什么
  • 欢乐派对电脑版怎么下载
  • YOYO日常怎么开启首页功能管理中的课程表?
  • 热门搜索
    手抄报花边图片 清明手抄报 简单 建国手抄报内容 诚信手抄报内容 金色童年手抄报 民族团结手抄报资料 保护海洋手抄报 走进名著手抄报 师恩难忘手抄报 纪念英雄手抄报