CSS文本强制换行

作者：Monodyee | 2024-03-15 15:14:00

踩

css文本强制换行

发生背景：

在没有空格的（字母、数字，符号），超过容器宽度时就会把容器撑大，不换行。所以在这里需要对其设置强制换行的样式；

解决方案：

/* word-wrap: break-word; */ /* word-break: break-all; */

区别：

word-wrap: break-word; 如果一个单词在一行放不下，就会将它放到下一行；

word-break: break-all; 如果一个单词在一行放不下，就会将它截开；

全部代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .text{
            width: 306px;
            display: block;
            /* word-wrap: break-word; */
            /* word-break: break-all; */
            border: 3px solid skyblue;
        }
    </style>
</head>
<body>
    <p class="text">ffffffkfja1111111111111111111111111111111111111111skljfka</p>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/242199