CSS的word-break属性用于指定文本在何处可以被分开换行，它可以控制当单词太长无法放在一行时如何处理。下面是详细说明和示例：
- word-break的取值：
- normal：默认值。只在单词内部换行，不会破坏单词。
- break-all：可以在任何字符上换行，如果必要，甚至可以在单词内部分割单词。
- keep-all：只能在字符之间换行，如果必要，会在单词内部压缩空格，但不会分割单词。
- break-word：可以在单词内部换行，但仅在必要时才分割单词。与break-all类似，但更倾向于保留单词。
- 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>word-break 示例</title>
<style>
p {
width: 150px;
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
}
.normal {
word-break: normal;
}
.break-all {
word-break: break-all;
}
.keep-all {
word-break: keep-all;
}
.break-word {
word-break: break-word;
}
</style>
</head>
<body>
<p class="normal">This is a long word: Supercalifragilisticexpialidocious</p>
<p class="break-all">This is a long word: Supercalifragilisticexpialidocious</p>
<p class="keep-all">This is a long word: Supercalifragilisticexpialidocious</p>
<p class="break-word">This is a long word: Supercalifragilisticexpialidocious</p>
</body>
</html>这个示例展示了word-break属性的四种不同取值的效果。normal取值仅在单词内部换行，不会破坏单词；break-all取值可以在任何字符上换行，如果必要，甚至可以在单词内部分割单词；keep-all取值只能在字符之间换行，如果必要，会在单词内部压缩空格，但不会分割单词；break-word取值可以在单词内部换行，但仅在必要时才分割单词。
正文完