div、p等标签不自动折行_div 展示不行折行-优快云博客

探讨了HTML中div标签内文本不自动换行的问题，并提供了通过CSS word-break属性解决的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现象

以前写HTML，感觉div、p等标签都会自动折行，今天随手敲了一点，发现并没有折行，浏览器水平方向上都出现了滚动条，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <div>asdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjkl</div>
</body>
</html>

印象中应该会自动折行的啊，然而事实上浏览器确出现了诡异的滚动条，没错，不管是IE还是标准浏览器。查了一下才知道，div里的东西被浏览器当做了一个超级长的单词。当单词太长时，浏览器并不会把一个单词拆开来强行换行，而是将这个单词放到下一行来显示。由于这里只有一个单词，所以就gg了……另外，汉字并不会出现这个问题，我们可以把一个汉字视为一个word（实际上是character）。

解决方法

可能要问了，那如果我要把单词拆开来实现折行呢？
CSS里提供了一个word-wrap属性，为这个div添加上word-break:break-word;就能实现强制折行，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            word-break: break-word;
        }
    </style>
</head>
<body>
    <div>
        asdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjkl
    </div>
</body>
</html>