Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
html
communitycreator

What is word-break in CSS?

Theodore Kelechukwu Onyejiaku

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Overview

word-break is a CSSCascade Style Scaling rule for words present in elements that are displayed on the browser.

When to use word-break

There are times when words or letters are broken when they reach the end of a line.

You can use word-break to specify what happens when a word reaches the end of a line.

Properties of word-break

The possible values the word-break property takes are:

  • normal
  • break-all
  • keep-all
  • break-word

Syntax


word-break: value

The value in the code snippet above can be any of the aforementioned values.

The word-break: normal property

The word-break: normal property sets the text to break based on the default settings. See the example below.

The word-break: break-all property

The word-break: break-all property specifies that words should break at any character. See the example below.

The word-break: keep-all property

The word-break: keep-all property is the same as the normal value, except that word-break shouldn’t be used for CJKChinese/Japanese/Korean texts.

See the example below.

The word-break: break-word property

The word-break: break-word property causes words to break in order to prevent overflow.

RELATED TAGS

css
html
communitycreator

CONTRIBUTOR

Theodore Kelechukwu Onyejiaku

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring