CSS word-break属性实例讲解

此 CSS 属性指定单词在行尾应如何中断。它定义了换行规则。使用此属性，不适合内容框的线条将在某个点断开。

用法

word-break:normal |keep-all |  break-all | inherit ;

该属性的默认值是 normal。因此，当我们不指定任何值时，它会自动使用。

值

keep-all：它以默认样式打破单词。它不应用于日文/中文/韩文 (CJK) 文本。

break-all：在字符之间插入word-break，防止单词溢出。应用此值后，浏览器将在任何点断行。如果它太长而无法容纳并位于行尾，则它可以从中间断开单词。它不适用连字符。

initial:它将属性设置为其默认值。

inherit:它从其父元素继承属性。

示例

在这个例子中，有三个容器。我们对第一个容器的内容应用正常值，对第二个容器的内容应用 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 javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.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 javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.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 javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.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>

输出