div设置自动换行 如何让一个div中的内容不换行?
浏览量:2900
时间:2021-03-12 15:08:00
作者:admin
如何让一个div中的内容不换行?
没有换行的div是什么意思?当达到宽度时,自动换行。如果你想在一个框中输入,只需使用input。
如何可以让div内的元素不换行?
1. 打开vscode,创建一个测试页,在测试页中,添加一个width=300px的div,并添加div的红色边框。这里设置了固定的宽度和边框,以便更好地演示是否包装。
2. 在div标签中,添加一些测试文本,可以随意添加,只是为了演示。不要用太少的词,至少要占两行空间。
3. 在浏览器中打开测试页,可以看到默认div中的文本并自动将其包装。因此,在没有强制换行设置的情况下,自动换行不需要额外设置。
4. 如果要强制div中的文本不换行,可以使用以下CSS样式。空白:nowrap.
5。在浏览器中,当您再次打开测试页时,可以看到div的内部文本中没有换行符,并且占用的宽度已经超过了div的预设宽度。
6。上面的效果,尽管文本没有强制换行。只是不太好看。如果要强制文本不在div的宽度内换行,并对超出的内容使用滚动条,则需要添加样式。
7. 在浏览器中再次打开测试页时,可以看到文本没有超过预设的div宽度,没有换行,显示div宽度不足的文本,并自动有一个滚动条。
版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。