CSS text-overflow Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 20 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The text-overflow property in CSS is used to specify how overflowed content that is not displayed should be signaled to the user. It is particularly useful for handling overflow situations in text elements where the text content exceeds the container's size.

This property can ensure that long text strings are handled gracefully, either by clipping them or by adding an ellipsis (or another string) to indicate that the text is longer than the container.

💡 Syntax

The syntax for the text-overflow property is simple and can be applied to block containers with overflowed content.

Syntax

Copied

element {
  text-overflow: value;
}

🎛️ Default Value

The default value of the text-overflow property is clip, meaning the overflowed text will be clipped without any visual indication that there is more text.

🏠 Property Values

Value	Description
clip	This is the default value. The text is clipped to fit the container.
ellipsis	Displays an ellipsis (...) to indicate that there is more text than is currently visible.
string	A string to display to indicate overflow. Note that this is not supported in all browsers.

📄 Example

In this example, we'll use the text-overflow property to add an ellipsis to text that overflows its container.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS text-overflow Example</title>
  <style>
    .container {
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <h1>Text Overflow Example</h1>
  <div class="container">
    This is a very long text that will not fit in the container.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The text-overflow property is widely supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. For best results, always test your design across different browsers to ensure compatibility.

🎉 Conclusion

The text-overflow property is an essential tool for web developers dealing with overflowed text content.

By providing options to clip the text or add an ellipsis, it ensures a clean and user-friendly interface. Experiment with different values to see how this property can improve the readability and aesthetics of your web projects.