如何使文字溢出时自动隐藏并显示省略号？

一、使用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>