ABYX

Split long words over multiple lines with CSS

Sometimes you need very long words to be split over multiple lines, because otherwise they break your layout or demand a lot of horizontal scrolling. There is a very handy CSS-trick that does not seem to be very known to the world that allows to split a long word over multiple lines. This trick uses plain CSS3 (no JavaScript!) and works by setting the word-wrap attribute to break-word.

word-wrap enabled

word-wrap-disabled

See how the example were word-wrap is enabled doesn't has a scrollbar? Check this page for more information on this property.

Post created by Pieter Verschaffelt on 2016-07-17 16:10:56