CSS 实现文本超出部分省略号显示

2024-01-05 12:35:53

概述

在网页设计中，经常会遇到文本超出容器的情况，此时需要对文本进行截断，并用省略号 (...) 表示超出部分。本文将介绍如何使用 CSS 实现文本超出部分省略号显示，包括单行省略号显示和多行省略号显示。

单行省略号显示

方法一：使用 `text-overflow` 属性

text-overflow 属性用于控制文本在溢出容器时如何显示。我们可以使用 text-overflow: ellipsis 来实现单行省略号显示。

.text-overflow-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

方法二：使用 `overflow` 和 `white-space` 属性

.text-overflow-hidden {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

多行省略号显示

方法一：使用 `-webkit-line-clamp` 属性

-webkit-line-clamp 属性用于限制文本显示的行数，我们可以使用 -webkit-line-clamp: 2 来实现两行省略号显示。

.text-line-clamp {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

方法二：使用 `display` 和 `flex` 属性

.text-overflow-flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
  <style>
    .text-overflow-ellipsis {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .text-overflow-hidden {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .text-line-clamp {
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .text-overflow-flex {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  </style>
</head>
<body>
  <h1>单行省略号显示</h1>
  <p class="text-overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget ante sapien. Nullam imperdiet arcu et sapien pharetra, eget vehicula leo tincidunt. Maecenas in purus at erat mattis rutrum. Nunc tincidunt, nisl vitae consectetur vestibulum, sapien arcu elementum felis, et aliquet massa lectus sit amet nibh.</p>
  <p class="text-overflow-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget ante sapien. Nullam imperdiet arcu et sapien pharetra, eget vehicula leo tincidunt. Maecenas in purus at erat mattis rutrum. Nunc tincidunt, nisl vitae consectetur vestibulum, sapien arcu elementum felis, et aliquet massa lectus sit amet nibh.</p>

  <h1>多行省略号显示</h1>
  <p class="text-line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget ante sapien. Nullam imperdiet arcu et sapien pharetra, eget vehicula leo tincidunt. Maecenas in purus at erat mattis rutrum. Nunc tincidunt, nisl vitae consectetur vestibulum, sapien arcu elementum felis, et aliquet massa lectus sit amet nibh.</p>
  <p class="text-overflow-flex">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget ante sapien. Nullam imperdiet arcu et sapien pharetra, eget vehicula leo tincidunt. Maecenas in purus at erat mattis rutrum. Nunc tincidunt, nisl vitae consectetur vestibulum, sapien arcu elementum felis, et aliquet massa lectus sit amet nibh.</p>
</body>
</html>