CSS word-break
CSS word-break
此CSS属性指定单词在行尾的断行方式。它定义了换行规则。使用此属性，内容框中不适合的行会在特定位置断开。
语法
word-break: normal |keep-all | break-all | inherit ;
此属性的默认值为
normal。因此，当我们不指定任何值时，它将自动使用。
normal。因此，当我们不指定任何值时，它将自动使用。
值
keep-all以默认样式。
break-all：：为了防止出现单词，在字符之间插入分词符。浏览器将在任何时候断开换行。如果太长而无法容纳单词并且出现在行尾，则可能会使单词从中间断开。
initial：。它将属性设置为其默认值。
inherit：它从其父元素继承属性。
示例
在此示例中，有三个容器。我们将
normal 值应用于第一个容器的内容，将
break-all 值应用于第二个容器的内容，并将
keep-all 值应用于第一个容器的内容第三个容器的内容。
normal 值应用于第一个容器的内容，将
break-all 值应用于第二个容器的内容，并将
keep-all 值应用于第一个容器的内容第三个容器的内容。
<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 350px;
border: 2px solid black;
text-align: left;
font-size: 20px;
color: blue;
}
.jtp {
word-break: normal;
}
.jtp1 {
word-break: break-all;
}
.jtp2 {
word-break: keep-all;
}
</style>
</head>
<center>
<body>
<h2>word-break: normal;</h2>
<p class="jtp">
Hi, Welcome to the bianchenghao6.com. This site is developed so that students may learn computer science related technologies easily. The bianchenghao6.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h2>word-break: break-all;</h2>
<p class="jtp1">
Hi, Welcome to the bianchenghao6.com. This site is developed so that students may learn computer science related technologies easily. The bianchenghao6.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h2>word-break: keep-all;</h2>
<p class="jtp2">
Hi, Welcome to the bianchenghao6.com. This site is developed so that students may learn computer science related technologies easily. The bianchenghao6.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</center>
</body>
</html>
输出
