Here’s a big snippet with all the CSS players involved:<\/p>\n
.dont-break-out {\r\n\r\n \/* These are technically the same, but use both *\/\r\n overflow-wrap: break-word;\r\n word-wrap: break-word;\r\n\r\n -ms-word-break: break-all;\r\n \/* This is the dangerous one in WebKit, as it breaks things wherever *\/\r\n word-break: break-all;\r\n \/* Instead use this non-standard one: *\/\r\n word-break: break-word;\r\n\r\n \/* Adds a hyphen where the word breaks, if supported (No Blink) *\/\r\n -ms-hyphens: auto;\r\n -moz-hyphens: auto;\r\n -webkit-hyphens: auto;\r\n hyphens: auto;\r\n\r\n}<\/code><\/pre>\nThat would fix the issue for us:<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/01\/fixed.png?resize=829%2C205\" "\\"fixed\\"")
<\/figure>\nHere’s the scoop:<\/p>\n
\noverflow-wrap: break-word;<\/code> makes sure the long string will wrap and not bust out of the container. You might as well use word-wrap<\/code> as well because as the spec says<\/a>, they are literally just alternate names for each other. Some browsers support one and not the other. Firefox (tested v43) only supports word-wrap<\/code>. Blink (tested Chrome v45) will take either one.<\/li>\n- With
overflow-wrap<\/code> in use all by itself, words will break kinda anywhere they need to. If there is an “acceptable break” character (like a literal dash, for instance), it will break there, otherwise it just does what it needs to do.<\/li>\n- You might as well use
hyphens<\/code> as well, because then it will try to tastefully add a hyphen where it breaks if the browser supports it (Blink doesn’t at time of writing, Firefox does).<\/li>\nword-break: break-all;<\/code> is to tell the browser that it’s OK to break the word wherever it needs to. Even though it kinda does that anyway so I’m not sure in what cases it’s 100% necessary.<\/li>\n<\/ul>\nIf you want be more manual with hyphens, you can suggest them in your markup. See more on the MDN page<\/a>.<\/p>\nBrowser support<\/h3>\nFor word-break<\/code>:<\/h4>\nThis browser support data is from Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div>Desktop<\/h4>