HTML&CSS · December 20, 2023

Css Basic: word-wrap

CSS Basic: word-wrap

In the world of web development, CSS plays a crucial role in determining the appearance and layout of a website. One important CSS property that web developers often use is word-wrap. This property allows you to control how long words should be displayed within a container when they exceed the container's width.

Understanding the word-wrap property

The word-wrap property is used to specify whether long words should be broken and wrapped onto the next line or if they should overflow the container. It is particularly useful when dealing with content that contains long URLs, email addresses, or other strings of text that may exceed the width of their container.

The word-wrap property accepts two values:

  • normal: This is the default value. It allows long words to break and wrap onto the next line if necessary.
  • break-word: This value forces long words to break and wrap onto the next line, even if there is enough space within the container.

Examples of word-wrap in action

Let's take a look at some examples to better understand how the word-wrap property works:

<style>
  .container {
    width: 200px;
    border: 1px solid black;
    padding: 10px;
  }
</style>

<div class="container">
  <p style="word-wrap: normal;">This is a long word: supercalifragilisticexpialidocious</p>
</div>

<div class="container">
  <p style="word-wrap: break-word;">This is a long word: supercalifragilisticexpialidocious</p>
</div>

In the first example, where word-wrap: normal; is used, the long word "supercalifragilisticexpialidocious" exceeds the width of the container. As a result, the word breaks and wraps onto the next line.

In the second example, where word-wrap: break-word; is used, the long word is forced to break and wrap onto the next line, even though there is enough space within the container.

Compatibility and browser support

The word-wrap property is supported by all major web browsers, including Chrome, Firefox, Safari, and Internet Explorer. However, it is important to note that Internet Explorer uses a different property name, word-wrap: break-word;, which is equivalent to overflow-wrap: break-word; in other browsers.

Conclusion

The word-wrap property is a useful tool for web developers when dealing with long words that may exceed the width of their containers. By using the word-wrap property, you can control how these long words are displayed, either by allowing them to break and wrap onto the next line or by forcing them to break and wrap even if there is enough space within the container.

For more information on CSS and web development, consider exploring the services offered by Server.HK, a leading VPS hosting company that provides top-notch hosting solutions.

You may also like...