div、p等标签不自动折行

最新推荐文章于 2022-01-20 12:52:13 发布

Dale_H

最新推荐文章于 2022-01-20 12:52:13 发布

阅读量2k

点赞数

分类专栏：前端文章标签： html 浏览器代码

本文链接：https://blog.csdn.net/qq_20659385/article/details/48932667

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

现象

以前写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>

建议

尽管没有兼容性问题，然而这里笔者仍不推荐这样做，因为这样可能会影响到整体的可阅读性，但是具体的还是视情况而定咯~

Dale_H

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
div、p等标签不自动折行

div、p等标签不自动折行以前写HTML，感觉div、p等标签都会自动折行，今天随手敲了一点，发现并没有折行，浏览器水平方向上都出现了滚动条，代码如下：<!DOCTYPE html><html lang="en"><head></head><body> <div>asdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghj
复制链接

扫一扫