文本溢出终极解决方案，需要的拿走

之前的方案

相信大家再网上搜文本溢出显示省略号，都会找到以下二种方案：

// 方案1：一行超出显示省略
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

// 方案2：多行超出显示省略
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

这二种方案都有缺陷，第一种只是适应一行超出的情况，而第二种只适应webkit内核的浏览器，兼容性不好，那么有没有支持多行，同时兼容性良好的方案呢，当然是有的，请接着往下看。

现在的方案

<style>
    .demo {
        background: #099;
        max-height: 40px;
        line-height: 20px;
        overflow: hidden;
    }
    .demo > .A {
        float: left;
        content:'';
        width: 20px;
        height: 40px;
    }

    .demo > .B {
        float: right;
        width: 100%;
        margin-left: -20px;
        word-break: break-all;
    }
    .demo > .C {
        float:right;
        width: 20px;
        height: 20px;
        position: relative;
        left:100%;
        transform: translate(-100%,-100%);
    }
</style>

<body>
    <div class="demo">
        <div class="A"></div>
    	<div class="B">这是一段很长的文本</div>
    	<div class="C">...</div>
    </div>
</body>

原理讲解

demo下有三个块A、B、C（这里命名不好，为了便于理解，所以起名A、B、C），其中A、B高度一致，C是一行文字的高度，里边放省略号，A向左浮动，B、C向右浮动，当文字过多时B的高度会超过A的高度，这时C会自动掉落到A的下面，我们只需把C重新定位到右边，然后再将B超出的部分隐藏，就会出现文字超出显示省略的效果。

优势

兼容性良好
一行多行都支持

缺陷

C块必须传入背景色，做不到背景色继承父级
使用起来比较复杂

能力封装

既然现在的方案使用起来比较复杂，那我们就对它做一下能力封装，下面我介绍一下我写的组件，已发布到npm，大家可以直接拿过去用（由于我平时都是用的React，所以这里是基于React实现的组件）。

安装

npm i over-flow-dsl --save

使用

import React from 'react';
import OverFlowDsl from 'over-flow-dsl';
import styles from './App.less';

function App() {
  return (
    <div className={styles.app}>
      <OverFlowDsl row={3} lineHeight={30} backgroundColor={'red'}>
        csdvsdvsdvcsdvsdvsdvcsdvsdvsdvcsdvsdvsdvcsdvsdvsdv
        csdvsdvsdvcsdvsdvsdvcsdvsdvsdvcsdvsdvsdvcsdvsdvsdv
      </OverFlowDsl>
    </div>
  );
}

export default App;

API

属性	说明	类型	默认值
row	超过多少行显示省略	number	1
lineHight	文字的行高，单位默认px	number	20
backgroundColor	文字背景色	string	#fff

源码地址

github.com/dengshangli…

参考文章

juejin.cn/post/684490…