CSS has a word-wrap property that allows long words to be broken and wrapped onto the next line. The
overflow-wrap helps to avoid unusually long strings of text that cause layout problems due to overflow.
overflow-wrap property can take one of the following values:
normal: the default. The browser will break lines according to the normal line-breaking rules; words or unbroken strings will not break, even if they overflow the container.
break-word: words or strings of characters that are too large to fit inside their container will break in an arbitrary place to force a line break. A hyphen character will not be inserted, even if the hyphens property is used.
inherit: the targeted element must inherit the value of the overflow-wrap property defined on its immediate parent.
Here’s a practical implementation of the
overflow-wrap property. The second paragraph, with
id=Overflow, specifies the additional
overflow-wrap=break-word property and gives us the desired output.
View all Courses