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

Media

Visual

Computed value

Specified value

Animatable

No

CSS Version

CSS3

JavaScript syntax

object.style.wordWrap

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

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

.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;
} 

Browser Support

Desktop
5.5	12	23	49	15	6.1
Tablets / Mobile
≤37	25	49	14	7	1.5

Last updated by CSSPortal on: 1st November 2019