CSS 属性

CSS text-overflow 属性控制如何向用户显示隐藏的溢出内容。它可以被修剪、有省略号（"…"）或显示自定义字符串。

此属性通常用于文本由于空间有限而可能被截断的情况，例如在固定宽度的容器或单行文本中。

文本溢出属性不会导致溢出。您需要指定 CSS 属性 overflow 和 white-space 导致文本溢出其容器之外。

overflow: hidden;
white-space: nowrap;

属性值

  • clip: 默认值。该关键字值在内容区域限制处截断文本，可能在字符中间；如果支持，请使用 text-overflow: '' 在字符转换处进行剪辑。

  • ellipse: 此关键字值在内部显示省略号（'...'，U+2026 HORIZONTAL ELLIPSIS）显示剪切文本的内容区域，如果空间有限，则减少可见文本并剪切省略号。

  • string: 该值允许您指定要用作的自定义字符串截断文本的指示器。例如，text-overflow: "..." 将使用三个点 (...) 作为指示符。

    这仅在 Firefox 浏览器中有效。

适用范围

块容器元素。

语法

text-overflow: clip | ellipse;

text-overflow 属性采用一个值并设置行尾的溢出行为，而两个值指示左端和右端的行为，允许关键字（剪辑或省略号）或 <string> 值。

CSS  text-overflow: 一个语法值

以下示例演示如何使用具有不同值的 text-overflow 属性，包括从左到右和从右到左的文本 -

<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>从左到右的文字</h2>
      <h3>clip</h3>
      <p class="box1">
         yxjc123.com CSS text-overflow: clip.
      </p>
      <h3>ellipsis</h3>
      <p class="box2">
         yxjc123.com CSS text-overflow: ellipsis.
      </p>
      <h3>"***" (Open is Firefox to see this effective)</h3>
      <p class="box3">
         yxjc123.com CSS text-overflow: "***".
      </p>
   </div>
   <div class="right-left">
      <h2>Right to left text</h2>
      <h3>clip</h3>
      <p class="box1">
         yxjc123.com CSS text-overflow: clip
      </p>
      <h3>ellipsis</h3>
      <p class="box2">
         yxjc123.com CSS text-overflow: ellipsis.
      </p>
      <h3>"***"</h3>
      <p class="box3">
         yxjc123.com CSS text-overflow: "***".
      </p>
   </div>    
</body>
</html>

CSS text-overflow: 双值语法

以下示例演示如何使用二值语法进行文本溢出，从而允许在文本的开头和结尾有不同的溢出行为。要查看效果，需要滚动以隐藏行的开头 -

打开 Firefox 即可查看此示例的效果
<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">
      与普遍看法相反，Lorem Ipsum 并不是简单的随机文本。
   </p>
   <h3>clip ellipsis</h3>
   <p class="box2">
      与普遍看法相反，Lorem Ipsum 并不是简单的随机文本。
   </p>
   <h3>ellipsis ellipsis</h3>
   <p class="box3">
      与普遍看法相反，Lorem Ipsum 并不是简单的随机文本。
   </p>
   <h3>ellipsis "***"</h3>
   <p class="box4">
      与普遍看法相反，Lorem Ipsum 并不是简单的随机文本。
   </p>  
   <script>
      const paras = document.querySelectorAll("p");

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