CSS文字过长省略号

By 微爱博客 | 2022年12月20日

需求

在页面展示的时候经常会遇到将过程的文字省略号展示

方案

样式类如下所示，前提是包裹文字的容器是需要有width的

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

示例

<html>
<head>
  <style>
    .demo{
      background-color: antiquewhite;
      width:100px;

      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div class="demo">这是一个超长文本呀,重复,</div>
</body>
</html>