css
  1. css-word-wrap
PreviousNext

CSS Word Wrap

The word-wrap property in CSS specifies whether to break words that are longer than the container's width, ensuring they wrap onto the next line.

Basic Usage of the word-wrap Property

The word-wrap property can take two values:

  • word-wrap: normal;: Default behavior, words longer than the container's width may overflow.
  • word-wrap: break-word;: Allows long words to be broken and wrapped onto the next line if they exceed the container's width.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .content {
    width: 200px;
    border: 1px solid #000;
    word-wrap: break-word;
  }
</style>
</head>
<body>

<div class="content">ThisIsAVeryLongWordWithoutSpacesAndItWillBreakAtTheContainerEdge</div>

</body>
</html>
Try Playground

Benefits of Using word-wrap Property

  • Text Control: Helps in managing long, unbroken words within a container.
  • Readability: Improves readability by preventing long words from overflowing the container.

Best Practices for Using word-wrap

  • Layout Analysis: Consider using word-wrap: break-word for containers with fixed widths and text content that might contain long, unbroken words.
  • Design Consistency: Apply word-wrap as needed to maintain a consistent and visually pleasing layout.

Understanding and applying the word-wrap property ensures that long words within a container wrap to the next line, improving the readability and layout of text content in web design.

Word SpacingZ Index
Published on: