长单词断开
如果框需要固定大小，或者你希望确保长单词不会溢出，那么 overflow-wrap 属性可以提供帮助。一旦单词太长而无法单独适应一行，此属性将断开单词。
html
Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
css.box {
border: 4px solid #f76707;
border-radius: 5px;
padding: 10px;
inline-size: 150px;
overflow-wrap: break-word;
}
注意： overflow-wrap 属性与非标准属性 word-wrap 的行为方式相同。浏览器现在将 word-wrap 属性视为标准属性的别名。
另一种可以尝试的属性是 word-break。此属性将在单词溢出的点处断开单词。即使将单词放到新行可以使其在不中断的情况下显示，它也会导致断开。
在下一个示例中，你可以在相同的文本字符串上比较这两个属性之间的差异。
html
css.box {
border: 4px solid #f76707;
border-radius: 5px;
padding: 10px;
inline-size: 30ch;
margin-block-end: 1em;
}
.box1 {
word-break: break-all;
}
.box2 {
overflow-wrap: break-word;
}
如果你想防止在字符串刚好有足够空间时出现大间隙，或者在有其他元素你不希望立即断开的情况下，这可能会很有用。
在下面的示例中，有一个复选框和标签。假设，如果标签太长而无法容纳在框中，你希望它断开。但是，你不希望它直接在复选框之后断开。
html
LongWordThatHasNoBreakingPossibilities
LongWordThatHasNoBreakingPossibilities
css.field {
inline-size: 150px;
border: 1px solid #cccccc;
margin-block-end: 1em;
padding: 10px;
}
.field-br {
word-break: break-all;
}