css
  1. css-text-overflow
PreviousNext

CSS Text Overflow

The text-overflow property in CSS controls how overflowed content within an element is indicated to users when it's too large to fit within its box.

Basic Usage of the text-overflow Property

The text-overflow property has a few possible values:

  • text-overflow: clip;: Clips the text when it overflows the container, hiding the excess content.
  • text-overflow: ellipsis;: Appends an ellipsis ("...") to the end of the text to show there is more content than visible.
  • text-overflow: string;: Displays a custom string at the end of the content to indicate overflow.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .ellipsis-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
    border: 1px solid #000;
  }
</style>
</head>
<body>

<div class="ellipsis-text">
  This text is too long to fit in the box and will be truncated with an ellipsis.
</div>

</body>
</html>
Try Playground

Benefits of Using text-overflow Property

  • Clarity: Indicates when content is too long for its container, maintaining a clean and organized layout.
  • Space Management: Helps in managing overflow without distorting the layout or structure.

Best Practices for Using text-overflow

  • Responsive Design: Use text-overflow to manage long text in small containers or for responsive design elements.
  • Consider Readability: Ensure the chosen method of handling overflow does not compromise the readability of the content.

Understanding and applying the text-overflow property allows for the clear indication of overflowed content within a defined container, maintaining a clean and organized presentation of text in web design.

Text ShadowText Indent
Published on: