CSS word-wrap Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 24 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The word-wrap property in CSS is used to specify whether or not the browser should break words when they overflow the content area.

This can be particularly useful for preventing long words from stretching the layout of a web page and ensuring that text content remains readable and aesthetically pleasing.

💡 Syntax

The syntax for the word-wrap property is straightforward. It can be applied to any element that contains text content.

Syntax

Copied

element {
  word-wrap: value;
}

Here, value can be one of the specific keywords described below.

🎛️ Default Value

The default value of the word-wrap property is normal, meaning that words will only break at normal line break points (such as spaces or hyphens).

🏠 Property Values

Value	Description
normal	Words will only break at normal line break points.
break-word	Words can be broken at arbitrary points if necessary to prevent overflow.

📄 Example

In this example, we'll use the word-wrap property to ensure that long words break and wrap onto the next line to prevent overflow.

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-wrap Example</title>
  <style>
    .wrapper {
      width: 200px;
      border: 1px solid #000;
      word-wrap: break-word;
    }
  </style>
</head>
<body>
  <h1>Text with Custom Word Wrap</h1>
  <div class="wrapper">
    Thisisaverylongwordthatwillbreakandwrapontothenextline.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The word-wrap property is supported in all modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is also supported in older versions of Internet Explorer (starting from IE 5.5). Therefore, you can use it confidently across a wide range of web browsers.

🎉 Conclusion

The word-wrap property is a simple yet effective tool for managing how text content behaves when it overflows its container.

By allowing or preventing words from breaking at arbitrary points, you can maintain the readability and layout integrity of your web pages. Experiment with this property to see how it can enhance the presentation of your text content.