CSS Text Handling: text-overflow, overflow-wrap, and More!

CSS Text Handling: text-overflow, overflow-wrap, and More!

When it comes to fine-tuning how text behaves within its containers on a webpage, CSS provides an array of properties to help. Let's delve into not just text-overflow and overflow-wrap, but also other valuable properties that contribute to a polished text display.

text-overflow: ellipsis;

The text-overflow property, especially when set to ellipsis, is a lifesaver for managing text that exceeds its container's width. This property tells the browser to display an ellipsis (...) at the point where the text overflows its container.

Here's the basic setup:

.ellipsis-text {
  white-space: nowrap;    /* Prevents text from wrapping */
  overflow: hidden;       /* Hides overflowing content */
  text-overflow: ellipsis; /* Displays ellipsis for truncated text */
  width: 200px;           /* Example width */
}

And in the HTML:

<div class="ellipsis-text">
  This is a long text that will be truncated with an ellipsis when it's too long to fit in the container.
</div>

In this example, the text inside the .ellipsis-text div will be truncated with an ellipsis if it's too long to fit within the 200px wide container. The white-space: nowrap; ensures that the text does not wrap.

overflow-wrap: break-word;

On the other hand, overflow-wrap steps in to handle long words or strings that are too large to fit within a container's width. Setting it to break-word allows the browser to break long words and wrap them onto the next line as needed.

Here's the CSS for overflow-wrap:

.break-word {
  width: 200px;           /* Example width */
  overflow-wrap: break-word; /* Allows breaking long words */
}

And the corresponding HTML:

<div class="break-word">
  ThisIsALongUnbreakableWordThatWillBeBrokenByTheBrowserToPreventOverflowingTheContainer
</div>

In this example, overflow-wrap: break-word; ensures that the long, unbreakable word will be broken by the browser at appropriate points to prevent it from overflowing the container, making the text wrap onto the next line as needed.

word-wrap: break-word;

The word-wrap property is similar to overflow-wrap, and it's another tool for managing long words in text. When set to break-word, it allows the browser to break long words and wrap them onto the next line.

Here's how it looks in CSS:

.word-wrap-example {
  width: 200px;         /* Example width */
  word-wrap: break-word; /* Allows breaking long words */
}

And in HTML:

<div class="word-wrap-example">
  ThisIsALongUnbreakableWordThatWillBeBrokenByTheBrowserToPreventOverflowingTheContainer
</div>

With word-wrap: break-word;, the browser will break long words to fit within the container's width, ensuring a neat text display.

white-space: pre-wrap;

The white-space property controls how whitespace inside an element is handled. When set to pre-wrap, it preserves both spaces and line breaks. This can be useful for displaying pre-formatted text or ensuring that line breaks are respected.

Here's the CSS for white-space: pre-wrap;:

.pre-wrap-example {
  white-space: pre-wrap; /* Preserves spaces and line breaks */
  width: 200px;          /* Example width */
}

And the corresponding HTML:

<div class="pre-wrap-example">
  This is some pre-formatted text with line breaks:
  Line 1
  Line 2
  Line 3
</div>

With white-space: pre-wrap;, the text will display with line breaks preserved, making it ideal for displaying blocks of text that need to retain their original formatting.

Putting It All Together

Combining these properties gives us powerful control over how text is displayed on our web pages. Here's an example that utilizes multiple properties:

.text-display {
  width: 200px;           /* Example width */
  white-space: nowrap;    /* Prevents text from wrapping */
  overflow: hidden;       /* Hides overflowing content */
  text-overflow: ellipsis; /* Displays ellipsis for truncated text */
  overflow-wrap: break-word; /* Allows breaking long words */
}

And in HTML:

<div class="text-display">
  ThisIsALongUnbreakableWordThatWillBeBrokenByTheBrowserToPreventOverflowingTheContainer This is a long text that will be truncated with an ellipsis when it's too long to fit in the container.
</div>

With this combined approach, the text will first attempt to truncate with an ellipsis if it's too long. If there are long unbreakable words, the browser will intelligently break them to fit within the container's width, providing a neat and readable text display.

In conclusion, mastering text-overflow, overflow-wrap, word-wrap, and white-space properties allows for elegant and effective handling of text within containers. Whether it's truncating long text, breaking unwieldy words, or preserving formatting, CSS offers a versatile toolkit for achieving the desired text display on your web pages.