如何可以让div内的元素不换行？_安全

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

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

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

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

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

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

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

代表一个段落，段落里的文字在达到右边边界时会自动换行，它并不知道你想在文字到达哪里就应该换行。你应该把不同行的文字分别放在不同的里，使每一行成为一个独立的段落。
使用标签换行上下文有间距(浏览器会自动地在段落的前后添加空行),而 标签换行是软换行,上下文没有间距

html中有两类元素（也就是标签），block和inline。

block类型的标签默认情况下会在两边自动加上换行。而inline则不会。

表格属于block类型的，所以它会跳到下一行。要想让它不自动换行可以设置它的css样式display属性的值为inline

如<body>

这是前面的文字<table style="display:inline;"><tr><td>这是表格里的内容

</td></tr></table>

</body>

html 强制不换行标签元素：

可以用nobr标签来实现。

nobr语法

内容

不换行内容放入与之间即可。

此标签与css white-space功能相同。

nobr标签特点：如不遇到br换行标签，内容在一行显示完，如遇到br换行标签，内容将在加br换行自动换行。

html nobr禁止内容换行案例：

这里假如有4行文章标题列表，设置宽度为200px；css行高为22px；对4列的内容我们采用ul li列表布局，其中2个对内容加标签，一个li内容不加，另外一个li内容少与宽度能显示完。

欢迎分享，转载请注明来源：内存溢出

如何可以让div内的元素不换行？