Css word wrap and word break

Applying CSS: word-wrap, overflow-wrap & word-break

A website’s responsiveness is very significant these days in order to display correctly on all devices. Although you may try your best, broken layouts may still occur despite your best efforts.

Long words can be broken and wrapped to the next line when you use the CSS word-wrap property. A string being too long can overflow a container in most cases, so this method can be helpful in preventing overflow.

The reason for broken layouts is that certain words are too long for their containers to contain them. You can experience content overflow when dealing with user-generated content.

For instance, the comments section of a blog post is subject to content overflow. The result is that you must apply styling to your content in order to prevent it from overflowing its container.

Table of Contents

#1 overflow-wrap

By defining overflow-wrap , the browser is able to break lines within an unbreakable string to prevent overflowing content.

Values

In the overflow-wrap property, there are only three values: normal, break-word, and anywhere. Defining the word-wrap property using overflow-wrap is considered a standard name.

i.) normal

Lines will only be broken in accordance with normal line-breaking rules. In the case of overflowing the container, words will not break. As a default, this property takes this value.

ii.) anywhere

Unless there are other acceptable breakpoints in the line, long words and URLs will break at any point. Even if the hyphens property is set, the hyphenation character will not be broken.

iii.) break-word

In order to force a line break, long words and strings of characters that do not fit inside their container will break at an arbitrarily placed point, but soft wrapping opportunities familiarised by word breaks are not taken into statement when computing min-content intrinsic sizes.

Syntax

overflow-wrap: normal | anywhere | break-word | initial | inherit;

Overflow-wrap example

 body < display: grid; place-items: center; min-height: 100vh; margin: 0; color: #fff; background-image: linear-gradient(20deg, #b3f6d8, #007ea7); font: 1.5rem/1.333 'Oxygen Mono', monospace; overflow-x: hidden; >@media (max-width: 500px) < body < font-size: 1.125rem; >> main < position: relative; margin: 15px 10px; >main::after < content: ''; display: block; position: absolute; top: 16px; left: calc(28ch + 9px); bottom: 0; border-left: 2px dashed #fff6; >h1 < position: relative; z-index: 2; width: min-content; margin: 0 10px; padding: 5px 10px; border-radius: 4px; background-color: #000; font-weight: normal; font-size: 0.667em; white-space: nowrap; transform: translateY(50%); >p < width: 28ch; margin: 0 0 15px; padding: 20px 10px 10px; border-radius: 4px; background-color: #0006; >.break-word < overflow-wrap: break-word; >.anywhere < overflow-wrap: anywhere; >.unset 

 
normal
 
Pneumonoultramicroscopicsilicovol
 
overflow-wrap: break-word
 
Pneumonoultramicroscopicsilicovol
 
overflow-wrap: anywhere
 
Pneumonoultramicroscopicsilicovol
 
overflow-wrap: unset
 
Pneumonoultramicroscopicsilicovol
 

#2 word-wrap

Lines are wrapped into words in the word-wrap property to fit within the container. Words that aren’t unbreakable can even be broken by this property.

The word-wrap property in CSS breaks long words into lines and wraps them onto the next line. In order to prevent layout problems arising from overflowing text strings, overflow-wrapping is used.

Values

In the word-wrap property, one of the following values can be specified:

i.) normal

This is the default setting. Regardless of whether a word or an unbroken string overflows the container, the browser will break the line according to the normal line-breaking rules.

ii.) break-word

A line break will be forced at an arbitrary place if the words or strings of characters are too large for their container. By using the hyphens property, a hyphen character will not be rendered.

iii.) inherit

Upon inheriting the overflow-wrap property from its immediate parent, the targeted element must inherit its value.

Syntax

In CSS, word-wrap has the following syntax:

word-wrap: normal | break-word | initial | inherit;

A word-wrap example

 body < display: grid; place-items: center; min-height: 100vh; margin: 0; color: #fff; background-image: linear-gradient(20deg, #b3f6d8, #007ea7); font: 1.5rem/1.333 'Oxygen Mono', monospace; overflow-x: hidden; >@media (max-width: 500px) < body < font-size: 1.125rem; >> main < position: relative; margin: 15px 10px; >main::after < content: ''; display: block; position: absolute; top: 16px; left: calc(28ch + 9px); bottom: 0; border-left: 2px dashed #fff6; >h1 < position: relative; z-index: 2; width: min-content; margin: 0 10px; padding: 5px 10px; border-radius: 4px; background-color: #000; font-weight: normal; font-size: 0.667em; white-space: nowrap; transform: translateY(50%); >p < width: 28ch; margin: 0 0 15px; padding: 20px 10px 10px; border-radius: 4px; background-color: #0006; >.normal < word-wrap: normal; >.break-word < word-wrap: break-word; >.inherit 

 
overflow-wrap: normal
 
Pneumonoultramicroscopicsilicovol
 
overflow-wrap: break-word
 
Pneumonoultramicroscopicsilicovol
 
overflow-wrap: inherit
 
Pneumonoultramicroscopicsilicovol
 

#3 word-break

When the content box would otherwise overflow, line breaks are inserted using the word-break CSS property.

A line break is usually only inserted when there is a space or hyphen in the space. Nevertheless, when the word-break property is set to break-all, the browser breaks lines wherever they occur.

By using the word-break CSS property, words can be broken or split depending on where they appear in a line. Using the word-wrap property, long words can be split/broken and wrapped into the next line.

Values

Below is a list of values that can be used to specify the word-break property.

i.) normal

This program uses line break rules. As a default, this property has this value.

ii.) break-all

By specifying this value, a break will be generated exactly where the text would overflow the container if it was left unbroken. Consequently, it will be difficult to read as it breaks the word in any character.

iii.) keep-all

It is not recommended to use word breaks when writing Chinese/Japanese/Korean (CJK) text. The behaviour of non-CJK texts is the same as it is for CJK texts.

iv.) break-word

If it is left unchanged, the text will overflow the container at the exact point where it would otherwise break. As a result, the word will be difficult to read if it is broken by any character.

Syntax

word-break: normal | break-all | keep-all | break-word | initial | inherit;

An example of word-break

body < display: grid; place-items: center; min-height: 100vh; margin: 0; color: #fff; background-image: linear-gradient(20deg, #b3f6d8, #007ea7); font: 1.5rem/1.333 'Oxygen Mono', monospace; overflow-x: hidden; >@media (max-width: 500px) < body < font-size: 1.125rem; >> main < position: relative; margin: 15px 10px; >main::after < content: ''; display: block; position: absolute; top: 16px; left: calc(28ch + 9px); bottom: 0; border-left: 2px dashed #fff6; >h1 < position: relative; z-index: 2; width: min-content; margin: 0 10px; padding: 5px 10px; border-radius: 4px; background-color: #000; font-weight: normal; font-size: 0.667em; white-space: nowrap; transform: translateY(50%); >p < width: 28ch; margin: 0 0 15px; padding: 20px 10px 10px; border-radius: 4px; background-color: #0006; >.normal < word-break: normal; >.break-all < word-break: break-all; >.keep-all < word-break: keep-all; >.break-word < word-break: break-word; >.initial < word-break: initial; >.inherit

 
normal
 
Pneumonoultramicroscopicsilicovol
 
word-break: break-all
 
Pneumonoultramicroscopicsilicovol
 
word-break: keep-all
 
Pneumonoultramicroscopicsilicovol
 
word-break: break-word
 
Pneumonoultramicroscopicsilicovol
 
word-break: initial
 
Pneumonoultramicroscopicsilicovol
 
word-break: inherit
 
Pneumonoultramicroscopicsilicovol
 

Wrapping-up

An alternate name of word-wrap’s legacy name is overflow-wrap. The two can therefore be used interchangeably. Despite this, overflow-wrap properties are not well supported by all browsers.

If you want near-universal browser support, you should use word-wrap instead of overflow-wrap. Word-wrap should continue to be supported by browsers and user agents for legacy reasons, according to the draft CSS3 specification.

If It might suffice to use overflow-wrap or its legacy name word-wrap if you are looking to handle the content overflow.

The word-break function can also be used to break a word between two characters when the word exceeds its container. With word-break, you should use caution because browser support is limited, similarly to overflow-wrap.

Real User Monitoring with Atatus

Atatus enable you to gain visibility into poorly performing parts of your website that negatively impact your end users through a scalable, end-user monitoring solution. Improve the user experience with a better understanding of your front-end performance errors.

Improve end-user performance by diagnosing the complex front-end issues arising from slow page load times, route changes, late static assets, poor XMLHttpRequest, and JS errors

In addition to Google’s Core Web Vitals and Other Web Vitals, we gather critical performance data that helps you understand what’s causing slow performance at the user level if they’re experiencing slow loading times, sudden changes, or trouble interacting with the page.

Identify and solve front-end performance issues that are impacting real users with an in-depth view of every page-load event. Identify which assets are slowing down your pages using the detailed full resource waterfall view, which allows you to filter by URL, connection type (2G, 3G, 4G), device, country, and more.

Identify performance issues and user behavior without requiring users to load pages. The Single Page Application route shows how user interactions affect performance independent of the JavaScript framework, showing how user interactions impact their experience after the page has loaded.

Источник

Wrapping and breaking text

This guide explains the various ways in which overflowing text can be managed in CSS.

What is overflowing text?

In CSS, if you have an unbreakable string such as a very long word, by default it will overflow any container that is too small for it in the inline direction. We can see this happening in the example below: the long word is extending past the boundary of the box it is contained in.

CSS will display overflow in this way, because doing something else could cause data loss. In CSS data loss means that some of your content vanishes. So the initial value of overflow is visible , and we can see the overflowing text. It is generally better to be able to see overflow, even if it is messy. If things were to disappear or be cropped as would happen if overflow was set to hidden you might not spot it when previewing your site. Messy overflow is at least easy to spot, and in the worst case, your visitor will be able to see and read the content even if it looks a bit strange.

In this next example, you can see what happens if overflow is set to hidden .

Finding the min-content size

To find the minimum size of the box that will contain its contents with no overflows, set the width or inline-size property of the box to min-content .

Using min-content is therefore one possibility for overflowing boxes. If it is possible to allow the box to grow to be the minimum size required for the content, but no bigger, using this keyword will give you that size.

Breaking long words

If the box needs to be a fixed size, or you are keen to ensure that long words can’t overflow, then the overflow-wrap property can help. This property will break a word once it is too long to fit on a line by itself.

Note: The overflow-wrap property acts in the same way as the non-standard property word-wrap . The word-wrap property is now treated by browsers as an alias of the standard property.

An alternative property to try is word-break . This property will break the word at the point it overflows. It will cause a break-even if placing the word onto a new line would allow it to display without breaking.

In this next example, you can compare the difference between the two properties on the same string of text.

This might be useful if you want to prevent a large gap from appearing if there is just enough space for the string. Or, where there is another element that you would not want the break to happen immediately after.

In the example below there is a checkbox and label. Let’s say, you want the label to break should it be too long for the box. However, you don’t want it to break directly after the checkbox.

Adding hyphens

To add hyphens when words are broken, use the CSS hyphens property. Using a value of auto , the browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. To have some control over the process, use a value of manual , then insert a hard or soft break character into the string. A hard break ( ‐ ) will always break, even if it is not necessary to do so. A soft break ( ­ ) only breaks if breaking is needed.

You can also use the hyphenate-character property to use the string of your choice instead of the hyphen character at the end of the line (before the hyphenation line break).

This property also takes the value auto , which will select the correct value to mark a mid-word line break according to the typographic conventions of the current content language.

The element

In the below example the text breaks in the location of the .

See also

• The HTML element
• The CSS word-break property
• The CSS overflow-wrap property
• The CSS white-space property
• The CSS hyphens property
• Overflow and Data Loss in CSS

Found a content problem with this page?

This page was last modified on May 25, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник