CSS overflow-wrap Property

Description

The overflow-wrap CSS property is used to control how words within an element should break and wrap when they exceed the boundaries of their container. It is particularly useful for ensuring that long words or strings of text do not disrupt the layout of a webpage. The property has two possible values: "normal," which allows words to break at their usual soft wrap points (like spaces and hyphens), and "break-word," which allows words to break anywhere within the container, even if it means breaking them in the middle of characters. This property is especially valuable for improving the readability and aesthetics of text content within responsive web designs.

Initial value

normal

Applies to

All elements

Inherited

Yes

Computed value

Specified value

Animatable

No

JavaScript syntax

object.style.overflowWrap

Interactive Demo

overflow-wrap: normal;

overflow-wrap: anywhere;

overflow-wrap: break-word;

Syntax

overflow-wrap: normal | break-word

Values

• normalIndicates that lines may only break at normal word break points.
• break-wordIndicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

Example

<h2>Block with the overflow-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 overflow-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;
   overflow-wrap: normal;
   background: azure; 
   border: 1px solid gray; 
} 
.test2 {
   width: 300px;
   overflow-wrap: break-word; 
   background: azure;
   border: 1px solid gray;
} 

Browser Support

The following table will show you the current browser support for the CSS overflow-wrap property.

Desktop
18	23	49	12.1	7

Tablets / Mobile
25	49	12.1	7	1.5	4.4

Last updated by CSSPortal on: 2nd January 2024