CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



word-wrap

CSS or Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in HTML or XML. It is used to style web pages and user interfaces written in HTML and XHTML. CSS has a wide range of properties that can be used to style web pages. One such property is word-wrap.

Brief Explanation of Word-wrap

Word-wrap is a CSS property that allows long words to be broken and wrapped onto the next line. It is used to prevent long words from overflowing the container and breaking the layout of the web page. Word-wrap is also known as overflow-wrap and is supported by all modern browsers.

The word-wrap property can take two values:

  • normal: This is the default value. It allows long words to break only at allowed break points, such as spaces and hyphens.
  • break-word: This value allows long words to break at any point, even if it is in the middle of a word. This can cause some words to be broken in an unexpected way, but it ensures that the layout of the web page is not affected.

Code Examples

Here are some examples of how to use the word-wrap property in CSS:

Example 1:

  
    p {
      word-wrap: normal;
    }
  

In this example, the word-wrap property is set to normal. This means that long words will only break at allowed break points.

Example 2:

  
    p {
      word-wrap: break-word;
    }
  

In this example, the word-wrap property is set to break-word. This means that long words will break at any point, even if it is in the middle of a word.

Example 3:

  
    p {
      word-wrap: break-word;
      width: 200px;
    }
  

In this example, the word-wrap property is set to break-word and the width of the container is set to 200px. This ensures that long words are broken and wrapped onto the next line within the container.

Conclusion

Word-wrap is a useful CSS property that allows long words to be broken and wrapped onto the next line. It is used to prevent long words from overflowing the container and breaking the layout of the web page. The word-wrap property can take two values: normal and break-word. Normal allows long words to break only at allowed break points, while break-word allows long words to break at any point, even if it is in the middle of a word.

References

Activity