怎么让文字根据div的宽度自己调整而不是超出div边界？

img

正在听css的课程发现我和视频里的代码一样，但是我div中的文字会超出盒子边界

img


但是视频里的就不会

img


谢谢

不清楚你说的视频，文本可以用 white-space控制是否换行


<!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>
        div{
            width: 500px;
            height: 100px;
            background-color: pink;
            white-space: wrap;
            /* white-space: nowrap; */
           
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus quasi laborum nemo ab, eligendi dolorem voluptatibus porro odit enim dolores culpa sed unde quisquam distinctio, hic necessitatibus quos sunt in.</div>
</body>
</html>

div加入white-spacer:wrap;

题主：我发现其实不加white-space: wrap; 也可以换行，只是由于最开始我的内容全部都是英文字母且没有空格，浏览器（或许）识别为一个单词，所以没有换行，加入中文字符或者空格之后即可实现根据盒子的宽度换行换行

1.如果div里面的内容是只有英文或者数字时，给div添加 word-break: break-all即可。

img

img

2.如果div里面的内容有文字时，则什么都不用添加。

img


img