溢位包裝
overflow-wrap
告訴瀏覽器它可以將目標元素內的一行文字分解到另一個不可破壞的地方的多行。有助於防止長字串文字導致佈局問題,因為它的容器溢位。
CSS
div {
width:100px;
outline: 1px dashed #bbb;
}
#div1 {
overflow-wrap:normal;
}
#div2 {
overflow-wrap:break-word;
}
HTML
<div id="div1">
<strong>#div1</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> is too long so it will overflow past the edge of the line-break
</div>
<div id="div2">
<strong>#div2</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> will be split at the line break and continue on the next line.
</div>
overflow-wrap - 價值 |
細節 |
---|---|
normal |
如果字長於行,則允許字溢位 |
break-word |
如有必要,將一個單詞分成多行 |
inherit |
繼承此元素的父元素值 |