字节一面：如何实现单行／多行文本溢出的省略样式？

落日映苍穹つ 2024-04-17 10:27 97阅读 0赞

![a90d604fac5e42b394b6452c426b9890.png][]

**前言**

> 最近博主在**字节面试**中遇到这样一个面试题，这个问题也是前端面试的高频问题，作为一名前端开发工程师，css是我们的必备技能，文本溢出问题也是我们经常遇到的问题，我们不仅只是处理这种情况，还要考虑他的兼容性，博主在这给大家细细道来。

--------------------

> ? 作者简介：[程序员小豪][Link 1]，全栈工程师，热爱编程，曾就职于**蔚来、腾讯**，现就职于某互联网大厂，技术栈：Vue、React、Python、Java  
> ? 本文收录于小豪的[前端][Link 2]系列专栏，后续还会更新**前端入门以及前端面试**的一些相关文章，手把手带你从零学习前端到面试找工作，并如果有想进入前端领域工作的同学，这个[前端][Link 2]专栏会对你有所帮助，欢迎关注起来呀  
> ? 本人也会持续的去关注`AIGC以及人工智能领域`的一些动向并总结到博客中，大家感兴趣的可以关注一下我的[人工智能][Link 3]专栏  
> ? [云原生][Link 4]的入门学习系列，大家有兴趣的可以看一看

#### 目录 ####

*  二、实现方式
 *   *  单行文本溢出省略
     *  多行文本溢出省略
     *   *  基于高度截断
         *   *  伪元素 + 定位
             *  基于行数截断
 *  总结

![ae13640f91cc411eb0bfd2d521514f0a.png][] \# 一、文本溢出

在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号

对于文本的溢出，我们可以分成两种形式：

*  单行文本溢出
 *  多行文本溢出

## 二、实现方式 ##

### 单行文本溢出省略 ###

理解也很简单，即文本在一行内显示，超出部分以省略号的形式展现

实现方式也很简单，涉及的`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`才能够生效的

举个例子

效果如下：

![img][]

可以看到，设置单行文本溢出较为简单，并且省略号显示的位置较好

### 多行文本溢出省略 ###

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

*  基于高度截断
 *  基于行数截断

#### 基于高度截断 ####

##### 伪元素 + 定位 #####

核心的`css`代码结构如下：

*  position: relative：为伪元素绝对定位
 *  overflow: hidden：文本溢出限定的宽度就隐藏内容）
 *  position: absolute：给省略号绝对定位
 *  line-height: 20px：结合元素高度,高度固定的情况下,设定行高, 控制显示行数
 *  height: 40px：设定当前元素高度
 *  ::after \{\} ：设置省略号样式

代码如下所示：

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

这种实现具有以下优点：

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

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

##### 基于行数截断 #####

纯`css`实现也非常简单，核心的`css`代码如下：

*  \-webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）
 *  display: -webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示
 *  \-webkit-box-orient: vertical：和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
 *  overflow: hidden：文本溢出限定的宽度就隐藏内容
 *  text-overflow: ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本

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

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

还能通过使用`javascript`实现配合`css`，实现代码如下所示：

css结构如下：

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%);
    }

javascript代码如下：

$(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");
            }
        });
    })

## 总结 ##

各位看官老爷们好，小豪已经建立了技术交流群，如果你很感兴趣，可以私信我加入我的社群。

?社群中不定时会有很多活动，例如学习资料分享、大厂面经分享、技术讨论、行业大佬创业杂谈等等。

?本人目前是在互联网大厂正式工作，也有过多个大厂的工作经历，加入社群也会有简历修改辅导，模拟面试，手把手项目实战教学，大厂工作内推机会以及大厂面试题解析分享等福利。

?社群方向很多，相关领域有Web全栈（前后端）、人工智能、AIGC、自媒体变现、前沿科技文章分享、论文精读等等。

?不管你是多新手的小白，都欢迎你加入社群中讨论、聊天、分享，加速助力你成为下一个技术大佬！也随时欢迎您跟我沟通，一起交流，一起成长。变现、进步、技术、资料、项目、你想要的这里都会有

?网络的风口只会越来越大，风浪越大，鱼越贵！欢迎您加入社群~一个人可以或许可以走的很快，但一群人将走的更远！

?想都是问题，做都是答案！行动起来吧！欢迎评论区or后台与我沟通交流，也欢迎您扫描下方二维码直接加入到我的交流社群！(微信：adcoderhao)

[a90d604fac5e42b394b6452c426b9890.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/3d28dd2320154e2d97fa75a8ac6ae95c.png
[Link 1]: https://blog.csdn.net/A_D_H_E_R_E
[Link 2]: https://blog.csdn.net/a_d_h_e_r_e/category_12357719.html
[Link 3]: https://blog.csdn.net/a_d_h_e_r_e/category_12402347.html
[Link 4]: https://blog.csdn.net/a_d_h_e_r_e/category_12369482.html
[ae13640f91cc411eb0bfd2d521514f0a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/972b67684b9c411a97627ee13953e005.png
[img]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/8d004c894b974120901b46ba72d3cbdd.png