阅读 107

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

之前的方案

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

// 方案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.im/post/684490…