Text
overflow-wrap
overflow-wrap sets whether long words and URLs that would overflow their box may wrap in the middle.
Syntax
normal | break-word | anywherePreview
Open https://example.com/a/very/long/path to see more. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize
Code
.box {
overflow-wrap: anywhere;
}Controls
overflow-wrapanywhere
Open https://example.com/a/very/long/path to see more. 素早い茶色の狐がのろまな犬を飛び越える。
About
Writing the value
normal: wraps only at ordinary break points, so long URLs overflow the box. This is the initial value.anywhere: wraps in the middle of a word, but only when there is no other place to wrap.break-word: wraps the same way asanywhere. The only difference is the minimum width, below.
anywhere versus break-word
anywhere counts the mid-word breaks when working out the element's minimum width; break-word does not, so an element with a long URL will not shrink below its length. The difference shows up in flex items, table cells and elements with width: min-content. The preview here has a fixed width, so both look the same.
Watch out
- The old name
word-wrapstill works with the same meaning. - It only allows breaks inside words that would overflow. To let every word break in the middle, use
word-break: break-all.