如何使文字溢出時自動隱藏並顯示省略號？

一、使用text-overflow屬性

在CSS樣式中使用text-overflow屬性可以實現文字溢出時隱藏並顯示省略號。該屬性需要與overflow屬性一起使用，它支持三個值：

text-overflow: clip; //默認值，直接截斷
text-overflow: ellipsis; //用省略號表示被修剪的文本
text-overflow: string; //用給定的字符串表示被修剪的文本

例如：

.overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; //保證不換行
  width: 200px; //讓容器被限制為 200 像素寬
}

二、使用JavaScript實現

如果需要動態計算文字長度，就需要使用JavaScript來實現。可以通過獲取文本的大小和容器大小來判斷是否需要省略。

<div id="container">
  <p id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus cumque consectetur, aspernatur officia debitis quaerat facilis odit totam praesentium voluptate? Facere sed eius repellendus aliquam incidunt dignissimos earum cupiditate error!</p>
</div>
<script>
  var text = document.getElementById("text");
  var container = document.getElementById("container");
  
  var containerWidth = container.offsetWidth;
  var textWidth = text.offsetWidth;
  
  if (textWidth > containerWidth) {
    var textContent = text.textContent;
    
    while (textWidth > containerWidth) {
      textContent = textContent.slice(0, -1);
      text.textContent = textContent + "...";
      textWidth = text.offsetWidth;
    }
  }
</script>

三、使用jQuery插件

如果使用jQuery，可以使用它提供的插件jquery.dotdotdot來實現。可以通過簡單的配置來實現省略號的效果。

//引入jQuery和jquery.dotdotdot插件庫
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/1.9.1/jquery.dotdotdot.min.js"></script>
  
<div class="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus minima quod reprehenderit, nobis autem, quos dolorem cupiditate non aliquam modi ipsa cumque saepe iste, sunt recusandae id omnis necessitatibus.
</div>

<script>
  $(document).ready(function() {
    $('.text').dotdotdot({
      height: 100,
      ellipsis: '...',
      wrap: 'word',
      fallbackToLetter: true,
      watch: true
    });
  });
</script>