BlogsDope image BlogsDope

CSS overflow-wrap

March 21, 2021 CSS TEXT 935

The overflow-wrap property is used to specify whether line breaks should be inserted within strings which would otherwise overflow their content box. Before the CSS Text Level 3 specification, this property was known as word-wrap.

This property is used to break long words which exceed their parent element's width. These long words can be some URL, user generated text or any arbitrary long string.

CSS

overflow-wrap: value;

Values

normal : Lines break at normal break points like white spaces. This is the default value.

break-word : Words may be broken at arbitrary points if there is no other acceptable break point in the line.

initial : Sets the default value.

inherit : Inherits value from parent element.

Example

See the Pen CSS overflow-wrap example by Aakhya Singh (@aakhya) on CodePen.

In the above example, giving overflow-wrap: break-word broke the long word assassinationofthewildinthewildforest which otherwise overflowed the parent element's container.

Browser Support

This property is supported in all the major browsers.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).