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
Explorer Edge Chrome Firefox Opera Safari
5.5122349156.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤3725491471.5

Last updated by CSSPortal on: 1st November 2019