CSS Style wordBreak Property: CSS Word Break

Table of Contents

CSS `word-break` Property: Comprehensive Guide

The word-break property in CSS is used to specify how words should break when reaching the end of a line. This property is particularly useful when dealing with long words or URLs that might overflow their container. It gives you control over where the browser should break the word, enhancing the layout and readability of your text.

Purpose of the `word-break` Property

The main purpose of the word-break property is to prevent text overflow by specifying how words should break within an element. It is especially useful in scenarios where you have long words, URLs, or code snippets that need to fit within a fixed-width container. By controlling the word breaking behavior, you can ensure that your text remains readable and visually appealing.

Syntax

The syntax for the word-break property is as follows:

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

Possible Values

Value	Description
`normal`	Uses the default line break rules. Words break only at allowed break points (e.g., spaces, hyphens).
`break-all`	Breaks words at any character if there are no otherwise acceptable break points in the line. It can break words even if it destroys the word structure.
`keep-all`	Prevents word breaks for CJK (Chinese, Japanese, Korean) text. Non-CJK text behaves as `normal`.
`break-word` (Deprecated)	Behaves the same as `normal` for normal words, but if an “overlong” word cannot fit without overflowing, it will be broken. Consider using `overflow-wrap: anywhere` instead.
`initial`	Sets the property to its default value (`normal`).
`inherit`	Inherits the property from its parent element.

Examples

Let’s explore different values of the word-break property with practical examples.

Example 1: `word-break: normal`

The normal value uses the default line break rules, breaking words only at normal break points like spaces or hyphens.

<!DOCTYPE html>
<html>
<head>
  <title>word-break: normal Example</title>
  <style>
    .container_normal {
      width: 200px;
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h2>word-break: normal</h2>
  <div class="container_normal">
    This is a long word: supercalifragilisticexpialidocious. It will not break unless it exceeds the container width.
  </div>
</body>
</html>

Output:

The long word “supercalifragilisticexpialidocious” does not break and overflows the container.

Example 2: `word-break: break-all`

The break-all value breaks words at any character, which is useful for preventing overflow when words are too long.

<!DOCTYPE html>
<html>
<head>
  <title>word-break: break-all Example</title>
  <style>
    .container_break_all {
      width: 200px;
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h2>word-break: break-all</h2>
  <div class="container_break_all" style="word-break: break-all;">
    This is a long word: supercalifragilisticexpialidocious. It will break at any character to fit.
  </div>
</body>
</html>

Output:

The long word “supercalifragilisticexpialidocious” breaks at arbitrary points to fit within the container.

Example 3: `word-break: keep-all`

The keep-all value prevents word breaks in CJK (Chinese, Japanese, Korean) text. Non-CJK text behaves as normal.

<!DOCTYPE html>
<html>
<head>
  <title>word-break: keep-all Example</title>
  <style>
    .container_keep_all {
      width: 200px;
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h2>word-break: keep-all</h2>
  <div class="container_keep_all" style="word-break: keep-all;">
    This is a long word: supercalifragilisticexpialidocious. 
    This is a Japanese sentence: こんにちは、皆さん。お元気ですか？
  </div>
</body>
</html>

Output:

The English word behaves as normal, overflowing the container. The Japanese sentence, treated as a single word, also overflows.

Example 4: Using `overflow-wrap: anywhere` (Replacement for `word-break: break-word`)

The break-word value is now deprecated. The recommended approach is to use overflow-wrap: anywhere. This value breaks words only if they are too long to fit on a line, otherwise behaving like normal.

<!DOCTYPE html>
<html>
<head>
  <title>overflow-wrap: anywhere Example</title>
  <style>
    .container_overflow_wrap {
      width: 200px;
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h2>overflow-wrap: anywhere (Recommended)</h2>
  <div class="container_overflow_wrap" style="overflow-wrap: anywhere;">
    This is a long word: supercalifragilisticexpialidocious. It will break only if it's too long to fit.
  </div>
</body>
</html>

Output:

The long word “supercalifragilisticexpialidocious” breaks only when necessary to fit within the container.

Example 5: Combining with Other CSS Properties

You can combine word-break with other CSS properties like overflow and width to create more complex layouts.

<!DOCTYPE html>
<html>
<head>
  <title>Combining word-break with overflow and width</title>
  <style>
    .container_combined {
      width: 150px;
      border: 1px solid #ccc;
      margin-bottom: 10px;
      overflow: auto;
      word-break: break-all;
    }
  </style>
</head>
<body>
  <h2>Combining Properties</h2>
  <div class="container_combined">
    This is an even longer word: floccinaucinihilipilification. It breaks and the overflow is handled.
  </div>
</body>
</html>

Output:

The long word “floccinaucinihilipilification” breaks at any character, and the overflow: auto property adds a scrollbar if the content exceeds the container’s height.

Tips and Notes

Use word-break: break-all cautiously, as it can disrupt the readability of text by breaking words at arbitrary points. ⚠️
For better readability, consider using overflow-wrap: anywhere (formerly known as word-wrap: break-word) as it breaks words only when necessary. ✅
The keep-all value is primarily useful for CJK (Chinese, Japanese, Korean) text. 🌏
Always test your layouts with different screen sizes and content to ensure the word-break property works as expected. 📱

Browser Support

The word-break property is widely supported across modern browsers:

Chrome
Firefox
Safari
Edge
Opera

Conclusion

The word-break property is a valuable tool for controlling text wrapping in CSS, especially when dealing with long words or URLs. By understanding its values and usage, you can create more readable and visually appealing layouts, preventing text overflow and enhancing the user experience. Remember to use it judiciously and consider the impact on readability.