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

前言

  • 单行文本省略
  • 多行文本省略
  • 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: nowrapoverflow: 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 个字符,并在后面添加省略号。
相关推荐
Point8 分钟前
[LeetCode] 最长连续序列
前端·javascript·算法
rookiesx12 分钟前
安装本地python文件到site-packages
开发语言·前端·python
支撑前端荣耀13 分钟前
九、把异常当回事,代码才靠谱
前端
LotteChar21 分钟前
HTML:从 “小白” 到 “标签侠” 的修炼手册
前端·html
趣多多代言人23 分钟前
20分钟学会TypeScript
前端·javascript·typescript
90后的晨仔23 分钟前
⚙️ 《响应式原理》— Vue 是怎么做到自动更新的?
前端·vue.js
结城23 分钟前
深入掌握CSS Grid布局:每个属性详解与实战示例
前端·css
寒..28 分钟前
网络安全第三次作业
前端·css·html
90后的晨仔38 分钟前
🧮《计算属性》— 自动根据其它响应式数据得出结果
前端·vue.js
小白阿龙1 小时前
如何实现缓存音频功能(App端详解)
前端·css·html5