#### 文本溢出处理 ####

##### 单行文本溢出 #####

单行文本溢出，可直接用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 (

);

}

}

#### 用法 ####

要处理的文字