之前的方案
相信大家再网上搜文本溢出显示省略号,都会找到以下二种方案:
// 方案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 |