文本溢出处理
单行文本溢出
单行文本溢出，可直接用css处理，很简单
.ellipsis {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
多行文本溢出
多行文本溢出，在不考虑兼容性的情况下，可直接用css 实现：
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 显示几行
overflow: hidden;
}
但是用css 兼容性很不友好，下面是react实现多行溢出显示…,实现原理就是支持css处理的时候，直接用css,不支持的时候，通过js计算来处理显示文字
组件代码
import React from ‘react’;
export default class Ellipsis extends React.Component {
static defaultProps = {
line: 2,
ellipsis: ‘…’
};
constructor(props) {
super(props);
let that = this;
this.text = ”;
this.setLineClamp = this.setLineClamp.bind(this);
this.setLineNormal = this.setLineNormal.bind(this);
this.clipText = this.clipText.bind(this);
this.init = this.init.bind(this);
}
componentDidMount() {
this.init();
}
componentDidUpdate() {
this.init();
}
init() {
if (‘webkitLineClamp’ in document.documentElement.style) {
this.setLineClamp();
this.removeTpl();
}
else {
this.setLineNormal();
this.clipText();
}
}
removeTpl() {
try {
this.refs.ellip.removeChild(this.refs.getHeight);
}
catch (err) {}
}
setLineNormal() {
Object.assign(this.refs.ellip.style, {
‘word-break’: ‘break-all’,
‘white-space’: ‘normal’
});
}
setLineClamp() {
Object.assign(this.refs.ellip.style, {
‘overflow’: ‘hidden’,
‘display’: ‘-webkit-box’,
‘webkitBoxOrient’: ‘vertical’,
‘word-break’: ‘break-all’,
‘white-space’: ‘normal’,
‘webkitLineClamp’: this.props.line
});
}
clipText() {
let {line, ellipsis, end = () => {}} = this.props;
let ellip = this.refs.ellip;
if (!this.h) {
let getHeight = this.refs.getHeight;
this.h = getHeight.offsetHeight;
this.removeTpl();
}
let getCountHeight = () => {
return parseFloat(getComputedStyle(ellip)[‘height’], 10);
};
let init = true;
if (!this.text) {
this.text = ellip.textContent;
}
else {
ellip.innerHTML = this.text;
}
let text = this.text;
let clip = () => {
let len = 0;
while (Math.floor(getCountHeight() / this.h) > line) {
len += 1;
text = text.slice(0, -1);
ellip.innerHTML = text;
if (!init) {
ellip.innerHTML += ellipsis;
}
}
return len;
};
if (0 < clip()) {
ellip.innerHTML += ellipsis;
init = false;
clip();
}
end();
}
render() {
let {children, className = ”} = this.props;
return (
{children}
好
);
}
}
用法
要处理的文字