§ 1.4 Word-Wrap

The word-wrap CSS property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.

Example:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio iste voluptates saepe ipsa magni repellendus explicabo numquam expedita dolore eveniet accusantium iure sit consequatur? Dolore minus vel blanditiis velit deserunt! We’ll also be checking a few things like the longest word in the world “Methionylthreonylthreonylglutaminylarginylisoleucine” and other stuff like links that are way long such as “Methionylthreonylthreonylglutaminylarginylisoleucine” and other long links like http://192.168.1.100/somedirectory/stayout/of/my/shit

_typeplate.scss
// Silent Sass Classes - A.K.A Placeholders
//
// normal: Indicates that lines may only break at normal word break points.
// break-word : Indicates that normally unbreakable words may be broken at
// arbitrary points if there are no otherwise acceptable break points in the line.

%breakword {
	word-wrap: break-word;
}

%normal-wrap {
	word-wrap: normal;
}

%auto-wrap {
	word-wrap: auto;
}

body {
	@extend %breakword;
}
↑ back to top