CSS word-break Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 32 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The word-break property in CSS is used to specify how words should break or split when reaching the end of a line. This property is particularly useful for controlling the behavior of text in situations where long words or URLs might disrupt the layout of your content.

By using the word-break property, you can ensure a more visually appealing and readable presentation of text on your website.

💡 Syntax

The syntax for the word-break property is straightforward. It can be applied to any block or inline-level element.

Syntax

Copied

element {
  word-break: value;
}

🎛️ Default Value

The default value of the word-break property is normal.

🏠 Property Values

Value	Description
normal	Uses the default line break rule.
break-all	Breaks words at any character to prevent overflow.
keep-all	Prevents word breaks in CJK (Chinese, Japanese, Korean) text. Non-CJK text behavior remains as normal.
break-word	Breaks words only when necessary to prevent overflow. This value is an alias for the deprecated word-wrap: break-word.

📄 Example

In this example, we'll demonstrate the different values of the word-break property.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS word-break Example</title>
  <style>
    .normal {
      word-break: normal;
      width: 200px;
      border: 1px solid #000;
      margin-bottom: 20px;
    }
    .break-all {
      word-break: break-all;
      width: 200px;
      border: 1px solid #000;
      margin-bottom: 20px;
    }
    .keep-all {
      word-break: keep-all;
      width: 200px;
      border: 1px solid #000;
      margin-bottom: 20px;
    }
    .break-word {
      word-break: break-word;
      width: 200px;
      border: 1px solid #000;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <h1>word-break Property Examples</h1>
  <div class="normal">
    Thisisaverylongwordthatshouldn’tbreak.
  </div>
  <div class="break-all">
    Thisisaverylongwordthatshouldn’tbreak.
  </div>
  <div class="keep-all">
    這是一個非常長的詞，應該不會斷開。
  </div>
  <div class="break-word">
    Thisisaverylongwordthatshouldn’tbreak.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The word-break property is supported in all modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is advisable to test your website across different browsers to ensure consistent behavior.

🎉 Conclusion

The word-break property is an essential tool for web developers looking to control the behavior of text wrapping on their web pages.

By customizing how words break at the end of a line, you can enhance the readability and aesthetic appeal of your content. Experiment with different values of the word-break property to see how it can improve the layout and presentation of your text.