CSS：div中文字换行设置
<!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: 30px;
/* height: 30px; */
border: 1px solid rgb(71, 50, 50);
margin-top: 20px;
}
/*只对英文起作用，以字母作为换行依据*/
.p1 {
word-break: break-all;
width: 150px;
}
/*--只对英文起作用，以单词作为换行依据*/
.p2 {
word-wrap: break-word;
width: 150px;
}
/*只对中文起作用，强制换行*/
.p3 {
white-space: pre-wrap;
width: 150px;
}
/*强制不换行，都起作用*/
.p4 {
white-space: nowrap;
width: 10px;
}
/*不换行，超出部分隐藏且以省略号形式出现*/
.p5 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100px;
}
</style>
</head>
<body>
<div class="p1">
hello world hello world hello world hello world hello world
</div>
<div class="p2">
hello world hello world hello world hello world hello world
</div>
<div class="p3">
hello world hello world hello world hello world hello world
</div>
<div class="p4">
hello world hello world hello world hello world hello world
</div>
<div class="p5">
hello world hello world hello world hello world hello world
</div>
</body>
</html>