CssHow-ToBeginner · 3 min read

How to Set Text Overflow in CSS: Simple Guide

Use the text-overflow property in CSS to control how overflowed text is displayed. Common values are ellipsis to show three dots (...) and clip to cut off the text. Remember to set overflow: hidden and white-space: nowrap for it to work properly.

📐

Syntax

The text-overflow property controls how text that is too long for its container is shown. It works only when the text is in a single line and the container hides overflow.

text-overflow: clip; cuts off the text without any indication.
text-overflow: ellipsis; shows three dots (...) to indicate more text is hidden.

To make it work, you must also set overflow: hidden; and white-space: nowrap; on the element.

css

selector {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

💻

Example

This example shows a box with limited width. The long text inside is cut off and ends with three dots using text-overflow: ellipsis.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Overflow Example</title>
<style>
  .box {
    width: 200px;
    border: 1px solid #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px;
    font-family: Arial, sans-serif;
  }
</style>
</head>
<body>
  <div class="box">This is a very long text that will not fit inside the box and will be cut off with an ellipsis.</div>
</body>
</html>

Output

A narrow rectangular box with a border containing the text: "This is a very long text that will not fit inside the box and will be cut off with an ellipsis." but visually it ends with "..." after fitting about 30 characters.

⚠️

Common Pitfalls

Many forget to set white-space: nowrap; and overflow: hidden;, so text-overflow does not work. Also, it only works on single-line text, so multiline text needs different approaches.

Incorrect example:

css

.wrong {
  text-overflow: ellipsis;
  width: 150px;
  border: 1px solid red;
}

.correct {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 150px;
  border: 1px solid green;
}

📊

Quick Reference

Remember these key points for text-overflow:

Works only on single-line text.
Requires white-space: nowrap; to prevent wrapping.
Requires overflow: hidden; to hide overflowed text.
ellipsis shows dots, clip cuts text silently.

✅

Key Takeaways

Set white-space: nowrap; and overflow: hidden; for text-overflow to work.

text-overflow: ellipsis; adds three dots to show hidden text.

text-overflow only works on single-line text containers.

Use clip to cut text without dots.

For multiline overflow, other CSS techniques are needed.