css
  1. css-word-break
PreviousNext

CSS Word Break

The word-break property in CSS controls how words break within a line when they reach the edge of their container.

Basic Usage of the word-break Property

The word-break property can take several values:

  • word-break: normal;: Default behavior. Breaks words at allowed break points or the edge of the container.
  • word-break: break-all;: Allows words to break at any point if they exceed the container's width.
  • word-break: keep-all;: Preserves word-break opportunities set by the browser's line breaking algorithm for languages like Chinese or Japanese.

Example

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

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

</body>
</html>
Try Playground

Benefits of Using word-break Property

  • Text Control: Helps in controlling how long words behave within a container.
  • Enhanced Readability: Improves the readability of long unbroken words within the layout.

Best Practices for Using word-break

  • Content Analysis: Analyze the nature of text content and apply the word-break value according to readability requirements.
  • Consideration for Languages: For multi-lingual content, choose the appropriate word-break value that suits the specific language's word breaking requirements.

Understanding and implementing the word-break property provides better control over the behavior of long, unbroken words within containers, improving readability and text presentation in web design.

White SpaceWord Spacing
Published on: