Question

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

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

Answer 1

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

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

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

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

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

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

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

Answer 2

如果可以横向滚动，加
white-space:nowrap;

如果不换行且不显示滚动条，超出的文本用表示，加
white-space:nowrap;
overflow: hidden;
text-overflow:ellipsis;

Answer 3

方法很多，比如2楼方法就可用，不过最简单的方法还是给中间那个div加上 display:inline-block;属性就搞定了

Answer 4

<div><p style="float:left">计划 </p>
<div title="" style="width: 500px; background-color: green; text-align:left;cursor:hand; float:left" >gfh</div>
</div>

Answer 5

<div style="width: 500px; background-color: green; text-align:left;cursor:hand;">计划</div>