CSS - text-overflow 屬性

CSS 的text-overflow 屬性控制如何向用戶顯示隱藏的溢位內容。它可以被修剪、顯示省略號 ('…') 或顯示自定義字串。

此屬性通常用於文字可能因空間有限而被截斷的情況，例如在固定寬度容器或單行文字中。

text-overflow 屬性不會導致溢位。您需要指定 CSS 屬性overflow 和white-space 才能使文字溢位其容器。

overflow: hidden;
white-space: nowrap;

可能的值

clip − 預設值。此關鍵字值在內容區域限制處截斷文字，可能在字元中間；如果支援，請使用text-overflow: '' 在字元轉換處剪輯。
ellipsis − 此關鍵字值在內容區域內顯示省略號 ('…', U+2026 HORIZONTAL ELLIPSIS) 以顯示被剪輯的文字，減少可見文字並在空間有限時剪輯省略號。
string − 此值允許您指定要用於截斷文字指示符的自定義字串。例如，text-overflow: "..." 將使用三個點 (...) 作為指示符。

這僅在 Firefox 瀏覽器中有效。

應用於

塊級容器元素。

語法

text-overflow: clip | ellipse;

text-overflow 屬性採用一個值並設定行的結束處的溢位行為，而兩個值則指示左右兩端的行為，允許使用關鍵字 (clip 或ellipsis) 或<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>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 - 雙值語法

以下示例演示如何使用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">
      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>

列印頁面