Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
word-wrap
warp

How to wrap text using CSS

Educative Answers Team

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.

svg viewer

Values

The 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.

Implementation

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.

RELATED TAGS

css
word-wrap
warp
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring