面试官😏 ：文本太长，超出部分用省略号 ,怎么搞？我：🤡

前言

单行文本省略
多行文本省略
javaScript 实现🥰

场景：单行文本省略

情景

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符串截断</title>
    <!-- 超出就隐藏起来 -->
    <style>
        .text-ellipse {
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="text-ellipse">
        这是一段很长的文本示例 ， 它将被截断并用省略号显示
    </div>
</body>
</html>

如果我不想换行呢？

css 复制代码

 white-space : nowrap;  /* 不换行 \n\r */

那如果想要超出就截断呢？

css 复制代码

  overflow: hidden;

在上面的基础上，想要【超出部分】用省略号表示，怎么办？

powershell 复制代码

 text-overflow: ellipsis;

所以需要用到下面 css 的三个属性

css 复制代码

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

总结

在 CSS 中，可以使用 text-overflow: ellipsis 结合 white-space: nowrap 和 overflow: hidden 来实现单行文本超出部分显示省略号。

示例代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .ellipsis {
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <p class="ellipsis">这是一段很长很长的文本，当文本内容超出容器宽度时会显示省略号。</p>
</body>
</html>

代码解释：

width: 200px：设置容器的宽度，当文本长度超过这个宽度时就会触发省略号显示。
white-space: nowrap：让文本不换行，保持在一行显示。
overflow: hidden：隐藏超出容器宽度的文本。
text-overflow: ellipsis：将超出部分用省略号表示。

场景：多行文本省略

情景

本来是这样的

现在要实现多行文本省略~

比如这个就是多行文本省略 ~

解法

在不同浏览器中，多行文本省略的实现方式有所差异。在 WebKit 内核的浏览器（如 Chrome、Safari）中，可以使用 -webkit-line-clamp 属性。

示例代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .multi-ellipsis {
      width: 200px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <p class="multi-ellipsis">这是一段很长很长的多行文本，当文本内容超出指定行数时会显示省略号。这是一段很长很长的多行文本，当文本内容超出指定行数时会显示省略号。</p>
</body>
</html>

代码解释：

display: -webkit-box：将元素设置为【弹性伸缩盒子模型】
-webkit-box-orient: vertical：设置子元素垂直排列 (控制盒模型方向)
-webkit-line-clamp: 3：限制文本显示的行数为 3 行。
overflow: hidden：隐藏超出部分的文本。

小知识： webkit 是浏览器内核，带有这个前缀的是指实验性属性，移动端都是基于 webkit 浏览器

拓展： JavaScript 实现

当需要更灵活地控制文本省略时，可以使用 JavaScript 来实现。

示例代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <p id="text">这是一个很长的文本示例， 他将被截断并用省略号显示。这是一个很长的文本示例， 他将被截断并用省略号显示。这是一个很长的文本示例， 他将被截断并用省略号显示。这是一个很长的文本示例， 他将被截断并用省略号显示。</p>
  <script>
    const textElement = document.getElementById('text');
    const maxLength = 20;
    const originalText = textElement.textContent;
    if (originalText.length > maxLength) {
      textElement.textContent = originalText.slice(0, maxLength) + '...';
    }
  </script>
</body>
</html>

代码解释：

首先获取文本元素，然后设置一个最大长度 maxLength。
接着获取元素的原始文本内容，判断其长度是否超过最大长度。
如果超过，就截取前 maxLength 个字符，并在后面添加省略号。