前端
面试题
前端
面试题

如何实现单行多行文本溢出的省略样式?

1.1 单行文本溢出省略

理解也很简单，即⽂本在⼀⾏内显⽰，超出部分以省略号的形式展现

实现⽅式也很简单，涉及的 css 属性有：

  • text-overflow：规定当⽂本溢出时，显⽰省略符号来代表被修剪的⽂本
  • white-space：设置⽂字在⼀⾏显⽰，不能换⾏
  • overflow：⽂字⻓度超出限定宽度，则隐藏超出的内容

overflow 设为 hidden，普通情况⽤在块级元素的外层隐藏内部溢出元素，或者配合下⾯两个属性实现⽂本溢出省略:

white-space:nowrap ，作⽤是设置⽂本不换⾏，是overflow:hidden 和 text-overflow：ellipsis ⽣效的基础

text-overflow 属性值有如下：

  • clip：当对象内⽂本溢出部分裁切掉
  • ellipsis：当对象内⽂本溢出时显⽰省略标记（...）

text-overflow 只有在设置了 overflow:hidden 和 white-space:nowrap 才能够⽣效的

<style>
      p {
        overflow: hidden;
        line-height: 40px;
        width: 400px;
        height: 40px;
        border: 1px solid red;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    </style>
    <p>
      这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这
      是⼀些⽂本这是⼀些⽂本这是⼀些⽂本
    </p>

效果如下:

pkt7N36.png

可以看到，设置单⾏⽂本溢出较为简单，并且省略号显⽰的位置较好

1.2 多行文本溢出隐藏

多⾏⽂本溢出的时候，我们可以分为两种情况：

  • 基于⾼度截断
  • 基于⾏数截断

1.2.1 基于高度截断

伪元素 + 定位

核⼼的 css 代码结构如下：

  • position: relative：为伪元素绝对定位
  • overflow: hidden：⽂本溢出限定的宽度就隐藏内容）
  • position: absolute：给省略号绝对定位
  • line-height: 20px：结合元素⾼度,⾼度固定的情况下,设定⾏⾼, 控制显⽰⾏数
  • height: 40px：设定当前元素⾼度
  • ::after {} ：设置省略号样式
<style>
      .demo {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
      }
      .demo::after {
        content: '...';
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
      }
    </style>
    <div class="demo">这是⼀段很⻓的⽂本</div>

实现原理很好理解，就是通过伪元素绝对定位到⾏尾并遮住⽂字，再通过 overflow: hidden 隐藏多余⽂字

这种实现具有以下优点：

  • 兼容性好，对各⼤主流浏览器有好的⽀持
  • 响应式截断，根据不同宽度做出调整

⼀般⽂本存在英⽂的时候，可以设置 word-break: break-all 使⼀个单词能够在换⾏时进⾏拆分

1.2.2 基于行数截断

纯 css 实现也⾮常简单，核⼼的 css 代码如下：

  • -webkit-line-clamp: 2：⽤来限制在⼀个块元素显⽰的⽂本的⾏数，为了实现该效果，它需要组合其他的WebKit属性）
  • display: -webkit-box：和1结合使⽤，将对象作为弹性伸缩盒⼦模型显⽰
  • -webkit-box-orient: vertical：和1结合使⽤ ，设置或检索伸缩盒对象的⼦元素的排列⽅式
  • overflow: hidden：⽂本溢出限定的宽度就隐藏内容
  • text-overflow: ellipsis：多⾏⽂本的情况下，⽤省略号“…”隐藏溢出范围的⽂本
<style>
      p {
        width: 400px;
        border-radius: 1px solid red;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
    <p>
      这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本
      这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本
    </p>

可以看到，上述使⽤了 webkit 的 CSS 属性扩展，所以兼容浏览器范围是 PC 端的 webkit 内核的浏览器，由于移动端⼤多数是使⽤ webkit ，所以移动端常⽤该形式

需要注意的是，如果⽂本为⼀段很⻓的英⽂或者数字，则需要添加 word-wrap: break-word 属性

还能通过使⽤ javascript 实现配合 css ，实现代码如下所⽰：

css结构如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
  </head>
  <body>
    <style>
      p {
        position: relative;
        width: 400px;
        line-height: 20px;
        overflow: hidden;
      }
      .p-after:after {
        content: '...';
        position: absolute;
        bottom: 0;
        right: 0;
        padding-left: 40px;
        background: -webkit-linear-gradient(left, transparent, #fff 55%);
        background: -moz-linear-gradient(left, transparent, #fff 55%);
        background: -o-linear-gradient(left, transparent, #fff 55%);
        background: linear-gradient(to right, transparent, #fff 55%);
      }
    </style>
    <p>
      这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本这是⼀些⽂本
    </p>
  </body>
  <script>
    $$(function () {
      //获取⽂本的⾏⾼，并获取⽂本的⾼度，假设我们规定的⾏数是五⾏，那么对超过⾏数的部分进⾏限制⾼度，并加上省略号
      $$('p').each(function (i, obj) {
        var lineHeight = parseInt($(this).css('line-height'))
        var height = parseInt($(this).height())
        if (height / lineHeight > 3) {
          $(this).addClass('p-after')
          $(this).css('height', '60px')
        } else {
          $(this).removeClass('p-after')
        }
      })
    })
  </script>
</html>