Cross / Legacy browser support for word wrapping

word-break-cross-browser.scss

.container {
    word-wrap: break-word; // works for IE11, IE10
    overflow-wrap: break-word; // New naming for word-wrap attribute, keep for possible deprecation of word-wrap
    word-break: break-word; // Helps with non English character wrapping, supported by Blink based browsers

    .item {
        // display: block or inline-block may be required
        max-width: 250px;
        width: 100%; // Allows for word wrap in IE10/IE11
        
        @supports (display: flex) {
            // Progressgive Enhancement
            // Allows for evergreen browsers to keep variable sizing, with a max
            // Good for something like a chat message
            width: inherit;
        }
    }
}