totn CSS

CSS: word-wrap property

This CSS tutorial explains how to use the CSS property called word-wrap with syntax and examples.

Description

The CSS word-wrap property defines whether the browser is allowed to line break within words when a word is too long to fit within its container.

Syntax

The syntax for the word-wrap CSS property is:

word-wrap: value;

Parameters or Arguments

value

The amount of extra space to display between words (in addition to the standard spacing for the font). It can be one of the following:

Value Description
break-word Words may be broken arbitrarily when a word is too long to fit within its container
p { word-wrap: break-word; }
normal Only normal word break points are allowed
p { word-wrap: normal; }

Note

  • If the word-wrap property is expressed as a fixed value, it can be either a positive or negative value.
    • A positive value would add additional space between words (in addition to standard spacing for the font).
    • A negative value would remove space between words.
  • If the word-wrap property is set to normal, the selected font would determine the space between words.
  • See also the overflow and overflow-x properties.

Browser Compatibility

The CSS word-wrap property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer 5.5+ (IE 5.5+)
  • Opera 10.5+
  • Safari (WebKit)

Example

We will discuss the word-wrap property below, exploring examples of how to use this property in CSS.

Normal

Let's look at an example where we set the word-wrap property to normal.

The CSS would look like this:

p { word-wrap: normal; width: 125px; background: lightblue; padding: 5px; }

The HTML would look like this:

<div>
  <p>This paragraph was written by techonthenet.com and contains the word, antidisestablishmentarianism, to demonstrate how to handle word breaking.</p>
</div>

The result would look like this:

CSS

In this CSS word-wrap example, line breaks are inserted only at normal word break points. So if a word is too long to fit within its container, it will overflow. As you can see the word antidisestablishmentarianism is too long to fit so part of it overflows the container.

Break-Word

Now let's see what happens when we use this same example and set the word-wrap property to break-word.

The CSS would look like this:

p { word-wrap: break-word; width: 125px; background: lightblue; padding: 5px; }

The HTML would look like this:

<div>
  <p>This paragraph was written by techonthenet.com and contains the word, antidisestablishmentarianism, to demonstrate how to handle word breaking.</p>
</div>

The result would look like this:

CSS

In this CSS word-wrap example, the browser is allowed to break words arbitarily when the word is too long to fit within its container. So in the example of the word antidisestablishmentarianism, the line break is inserted between "antidisestablishme" and "ntarianism" instead of overflowing the container.

Share on: