css文本溢出显示省略号white-space: nowrap; overflow: hidden; text-over

单行文本显示省略号

<!DOCTYPE html>
<html lang="en">
  <style>
    .text {
      width: 100px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
  <body>
    <div class="text">单行文本显示省略号</div>
  </body>
</html>

多行文本显示省略号

<!DOCTYPE html>
<html lang="en">
  <style>
    .text {
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  </style>
  <body>
    <div class="text">多行文本显示省略号行文本显示省略号</div>
  </body>
</html>