CSS word-wrap Property

Description

The word-wrap property is used to to specify whether or not the browser is allowed to break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit.

Initial value: normal
Applies to: All elements
Inherited: Yes
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.wordWrap

Interactive Demo

word-wrap: normal;

word-wrap: break-word;

This is the first time I've seen the word Pneumonoultramicroscopicsilicovolcanoconiosis. It's a long one.

Syntax

word-wrap: normal | break-word

Values

normalLines can only be broken at normal break points (spaces, non-alphanumeric characters, etc.).
break-wordWords that exceed the width of the container will be arbitrarily broken to fit within the containers bounds.
inherit

Example

HTML

<h2>Block with the word-wrap: normal value</h2> 

<div class="test">The longest village name in Europe: <a href = "https://en.wikipedia.org/wiki/Llanweir-Pullguingill" target = "_blank" title = "Read on Wikipedia"> Llanvairpullguingillogogerihirndrobullantisiliogogogo </a></div> 

<h2>Block with the value word-wrap: break-word</h2> 

<div class="test2">The longest village name in Europe: <a href = "https://en.wikipedia.org/wiki/Llanweir-Pullguingill" target = "_blank" title = "Read on Wikipedia"> Llanvairpullguingillogogerihirndrobullantisiliogogogo </a></div>

CSS

.test {
   width: 300px;
   word-wrap: normal;
   background: azure; 
   border: 1px solid gray; 
} 
.test2 {
   width: 300px;
   word-wrap: break-word; 
   background: azure;
   border: 1px solid gray;
}

Result

Editor