前端-英文在块级元素中不换行的问题

2024-01-15 11:46:34

问题描述

在块级元素中输入中文的情况下，文字宽度超出块级元素宽度后，内容会自动换行
在块级元素中输入英文的情况下，文字宽度超出块级元素宽度后，会在一行中显示全部内容，不能自动换行

块级元素输出英文内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #d3d4d3;
        }
    </style>
</head>
<body>
<div>
    sdfgsgfdgdfghdfghfdghfghfghfdghfgd
</div>

</body>
</html>

结果显示：

块级元素中输入中文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #d3d4d3;
        }
    </style>
</head>
<body>
<div>
    是第三方士大夫的啊手动阀手动阀的士大夫撒地方的但是啊发生的收到士大夫大师风范阿斯蒂芬阿斯蒂芬地方
</div>

</body>
</html>

解决方法

在块级元素中设置CSS样式

word-break属性
word-break:break-all;
word-break:break-word;
word-wrap属性
word-wrap:break-word;