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

Posted 2023-04-28

如题 下面是代码
<div>计划
<div title="" style="width: 500px; background-color: green; text-align: left;cursor:hand;"></div>
</div>
如何让中间的div和文字在一行

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

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

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

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

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

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

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

参考技术A 如果可以横向滚动，加
white-space:nowrap;

如果不换行且不显示滚动条，超出的文本用表示，加
white-space:nowrap;
overflow: hidden;
text-overflow:ellipsis; 参考技术B 方法很多，比如2楼方法就可用，不过最简单的方法还是给中间那个div加上 display:inline-block;属性就搞定了 参考技术C <div><p style="float:left">计划 </p>
<div title="" style="width: 500px; background-color: green; text-align:left;cursor:hand; float:left" >gfh</div>
</div>本回答被提问者采纳 参考技术D <div style="width: 500px; background-color: green; text-align:left;cursor:hand;">计划</div>

div标签内的文本会自动换行,span则不会。

参考技术A 首先，你要理解css的块级元素和内联元素，以及它们的区别。（这个知识点你自己百度找篇文章看下应该就明白了）
div是块级元素，span是内联元素。

其次，中文的排版和英文的排版是不一样的，英文需要手动处理换行。你可以将一串英文字母放在div里尝试一下，它是不会自动换行的。

div块级元素，有宽高限制，中文会自动换行。

span内联元素，没有宽高限制（即便你给它设置了宽高），不会自动换行。
但是如果你通过 display:block 将span标签转为块级元素，那么你给它设置宽高就会生效，那么它也会自动换行。