CSS显示省略号

史学娇

已于 2024-01-03 16:44:40 修改

阅读量523

点赞数

分类专栏： css 文章标签： css

于 2022-10-17 15:39:40 首次发布

本文链接：https://blog.csdn.net/weixin_46151381/article/details/127364781

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

单行

div {
    width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

多行

div {
    width: 350px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; // 显示的行数
    overflow: hidden;
}

无固定宽度

<!DOCTYPE html>
<html>
<head>
  <style>
    .listWrap{
      display: flex;
      width: 200px;
    }
    .ellipsis {
      display: flex;
      flex-direction: row;
      align-items: center;
      overflow: hidden;
    }
    .date{
      flex-shrink: 0;
    }
    .ellipsis-content {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div class="listWrap">
    <div class="ellipsis">
      <div class="ellipsis-content">This is a long text that will be truncated with an ellipsis if it exceeds one line.</div>
    </div>
    <div class="date">2023-02-02</div>
  </div>
</body>
</html>