<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
padding:10px;
border:1px solid #000;
font-size:17px;
width:180px;
margin-bottom: 10px;
}
#point{
word-break: normal;
}
#point1{
word-break: keep-all;
}
#point2{
word-break: break-all;
}
#point3{
word-break: break-word;
}
</style>
</head>
<body>
<h1>CSS word-break Property</h1>
<h2>word-break: normal;</h2>
<div id="point">
This text will break to next line 这是绕道而行的好方法 WhenWordBreakBreakAllIsUsed.
</div>
<h2>word-break: keep-all;</h2>
<div id="point1">
This text will break to next line 这是绕道而行的好方法 WhenWordBreakBreakAllIsUsed.
</div>
<h2>word-break: break-all;</h2>
<div id="point2">
This text will break to next line 这是绕道而行的好方法 WhenWordBreakBreakAllIsUsed.
</div>
<h2>word-break: break-word;</h2>
<div id="point3">
This text will break to next line 这是绕道而行的好方法 WhenWordBreakBreakAllIsUsed.
</div>
</body>
</html>