CSS Tutorial

CSS Word Wrap

The CSS word-wrap property is used to specify how long words should be handled when they overflow the container. This is especially useful when dealing with long strings of text or URLs that might otherwise cause layout issues. The property controls whether text should break and wrap to the next line or overflow beyond its container.

Key Points on CSS Word Wrap:

The word-wrap property allows you to specify how to handle long words or URLs within an element.
It is particularly useful in responsive designs where the container's width can vary.
The default value of word-wrap is normal, which allows the browser to break words at normal word-breaking points.
Setting word-wrap: break-word; ensures that long words or URLs will break and wrap onto the next line if they exceed the container’s width.
It is also used for text elements that contain unbreakable words or strings of characters that could disrupt the layout.

Syntax for CSS Word Wrap Property:

Syntax Example

/* Word wrap syntax */
            word-wrap: break-word;

Examples of CSS Word Wrap Property:

The following examples demonstrate the usage of the word-wrap property:

Code Example: Word Wrap with Break Word

div {
            word-wrap: break-word;
            width: 200px;
            border: 1px solid #ccc;
        }

Output

This is a long sentence that will break and wrap onto the next line if it exceeds the width of the container.

Code Example: Default Word Wrap

div {
            word-wrap: normal;
            width: 200px;
            border: 1px solid #ccc;
        }

Output

This is a long sentence that will overflow the container if it exceeds the width without wrapping.

Common Word Wrap Values:

word-wrap: normal; Allows the browser to break lines only at normal word-breaking points (e.g., spaces or punctuation).
word-wrap: break-word; Forces the browser to break long words and wrap them onto the next line to avoid overflow.

When using word-wrap: break-word;, it’s important to test different screen sizes and content types, especially if you are dealing with long URLs or strings of text, to ensure the layout is clean and readable.