CSS - text-overflow Property

CSS text-overflow property controls how hidden overflow content is displayed to users. It can be trimmed, have an ellipsis ('…'), or show a custom string.

This property is commonly used in situations where text may be truncated due to limited space, such as in a fixed-width container or a single line of text.

The text-overflow property does not cause an overflow. You need to specify the CSS properties overflow and white-space to cause text to spill outside of its container.

overflow: hidden;
white-space: nowrap;

Possible Values

  • clip − Default value. This keyword value truncates text at the content area limit, possibly in the middle of a character; if supported, use text-overflow: '' to clip at character transitions.

  • ellipse − This keyword value displays an ellipsis ('…', U+2026 HORIZONTAL ELLIPSIS) inside the content area to display clipped text, decreasing the visible text and clipping the ellipsis if space is limited.

  • string − This value allows you to specify a custom string to be used as the indicator for truncated text. For example, text-overflow: "..." would use three dots (...) as the indicator.

    This is effective only in Firefox browser.

Applies To

Block containers elements.

Syntax

text-overflow: clip | ellipse;

The text-overflow property takes one value and sets overflow behaviour for the line's end, while two values indicate behaviour for the left and right ends, allowing keywords (clip or ellipsis) or a <string> value.

CSS text-overflow - One Syntax Value

The following example demonstrates how to use text-overflow property with different values, including left-to-right and right-to-left text −

<html>
<head>
<style> 
   body {
      display: flex;
      justify-content: space-around;
   }
   p {
      width: 200px;
      border: 1px solid;
      padding: 2px 5px;
      white-space: nowrap;
      overflow: hidden;
   }
   .box1 {
      text-overflow: clip;
   }
   .box2 {
      text-overflow: ellipsis;
   }
   .box3 {
      text-overflow: "***";
   }
   .left-right > p {
      direction: ltr;
   }
   .right-left > p {
      direction: rtl;
   }
</style>
</head>
<body>
   <div class="left-right">
      <h2>Left to right text</h2>
      <h3>clip</h3>
      <p class="box1">
         Tutorialspoint CSS text-overflow: clip.
      </p>
      <h3>ellipsis</h3>
      <p class="box2">
         Tutorialspoint CSS text-overflow: ellipsis.
      </p>
      <h3>"***" (Open is Firefox to see this effective)</h3>
      <p class="box3">
         Tutorialspoint CSS text-overflow: "***".
      </p>
   </div>
   <div class="right-left">
      <h2>Right to left text</h2>
      <h3>clip</h3>
      <p class="box1">
         Tutorialspoint CSS text-overflow: clip
      </p>
      <h3>ellipsis</h3>
      <p class="box2">
         Tutorialspoint CSS text-overflow: ellipsis.
      </p>
      <h3>"***"</h3>
      <p class="box3">
         Tutorialspoint CSS text-overflow: "***".
      </p>
   </div>    
</body>
</html>

CSS text-overflow - Two-value Syntax

The following example demonstrates how to use the two-value syntax for text-overflow, allowing different overflow behaviors at the start and end of the text. To see the effect, scrolling is required to hide the start of the line as well −

Open is Firefox to see this example effective
<html>
<head>
<style> 
   p {
      width: 200px;
      border: 1px solid;
      padding: 5px;
      white-space: nowrap;
      overflow: scroll;
   }
   .box1 {
      text-overflow: clip clip;
   }
   .box2 {
      text-overflow: clip ellipsis;
   }
   .box3 {
      text-overflow: ellipsis ellipsis;
   }
   .box4 {
      text-overflow: ellipsis "***";
   }
</style>
</head>
<body>
   <h3>clip clip</h3>
   <p class="box1">
      Contrary to popular belief, Lorem Ipsum is not simply random text.
   </p>
   <h3>clip ellipsis</h3>
   <p class="box2">
      Contrary to popular belief, Lorem Ipsum is not simply random text.
   </p>
   <h3>ellipsis ellipsis</h3>
   <p class="box3">
      Contrary to popular belief, Lorem Ipsum is not simply random text.
   </p>
   <h3>ellipsis "***"</h3>
   <p class="box4">
      Contrary to popular belief, Lorem Ipsum is not simply random text.
   </p>  
   <script>
      const paras = document.querySelectorAll("p");

      for (const para of paras) {
         para.scroll(100, 0);
      }
   </script>   
</body>
</html>
Advertisements