Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
communitycreator

What is the word-break property in CSS?

Akande Olalekan Toheeb

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.

Answers Code

In CSS, long strings that don’t fit into their container have many properties to make them fit in. One such property is the word-break property.

The word-break property simply specifies the line breaking rules. It sets up where the line breaks will appear in the text is; otherwise, it will overflow its content box.

Syntax and values

Syntax

 word-break: value;

It’s the same syntax as all the other text associated properties.

Values

The word-break property has keyword values and global values.

The keyword values are:

 1. word-break: normal;
 2. word-break: break-all;
 3. word-break: keep-all;
 4. word-break: break-word;

normal - This values uses the default line break rule to set the rule of the long string.

break-all - The line will break at any character to prevent overflow.

This rule excludes Chinese, Japanese, and Korean text.

keep-all - This line will break at hyphens.

This value shouldn’t be used for Chinese, Japanese, abdKorean (CJK) text. Non-CJK text behavior is the same as value “normal.”

break-word - To prevent overflow words may be broken at arbitrary points.

The global values include:

 1. word-break: inherit;
 2. word-break: initial;
 3. word-break: revert;
 4. word-break: unset;

inherit - This sets the element to inherit the values of the parent element.

initial - This sets it to default value.

revert - This reverts the value of the property from its current value to the value it would have if this value hadn’t been specified. It sets the value to default or inherit.

unset - This acts as either inherit or initial. It will act as inherit if the parent has a value that matches, else it will act as initial.

break-word behaves exactly as the break-all. They can be used interchangeably.

RELATED TAGS

css
communitycreator

CONTRIBUTOR

Akande Olalekan Toheeb

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.

Answers Code
Keep Exploring