Ellipsis 多行文字控制

多行文字控制展示组件。

注意：由于控制每行显示字符数需要获取宽度，因此当前组件外层包裹的元素必须是 div、p 等块级元素，如果包裹 a、span 等需要通过 CSS 控制外层元素为 display: inline-block; 或者 display: block 类型。如果你很难理解这句话，就直接用 div 包裹就对了。

参数（props）

参数名 说明 必填 类型 默认值 可选值 备注
lineLimit 限制文字只显示几行。 false number 1 数字
text 要处理的文字。 true string ''
style 内联的样式 false object
className 自定义的 className false string ''
showTooltip 是否显示 tooltip 信息，相比 title 提示性更强。 false boolean false

文字的最大宽度和外框的最大宽度一致，必须填写文本数据，不支持非文本、富文本数据。

DEMO 列表

一行文字用法

本 Demo 演示一行文字的用法。

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import IceEllipsis from '@icedesign/ellipsis';


class App extends Component {

  render() {

    const style = {
      width: '200px'
    };

    return (
      <div style={style}>
        <IceEllipsis lineNumber={1} text="这是一串非常长的文字的长长长长长长长长这是一串非常长的文字的长长长长长长长长" />
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);

多行文字指定每行字数用法

本 Demo 演示多行文字指定每行字数用法。

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import IceEllipsis from '@icedesign/ellipsis';

class App extends Component {

  render() {

    const style = {
      width: '150px'
    };

    return (
      <div style={style}>
        <IceEllipsis showTooltip={true} lineLimit={2} text="一个两个三个四个五个六个七个八个九个十个十一个" />
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);

用在表格中

用在表格中的 demo。

需要注意，在不支持 WebkitLineClamp 属性下，显示省略号通过计算每行文字数量实现裁切。此时以中文宽度为准，如果文字带有英文，则会导致行数减少的问题。但不会超出行数，这是我们的目的。

import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import { Table } from '@alifd/next';
import IceEllipsis from '@icedesign/ellipsis';

const getData = () =>{
  let result = [];
  for(let i = 0; i< 5; i++){
    let title = `总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长`;
    if (i % 2) {
      title = `Quotation for 1PCS Nano 5.0 controller compatible+++++ 总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长总之这段文字很长很长很长`;
    }
    result.push({
        title: title,
        id:`这是一段很长的文字，但是只显示一行这是一段很长的文字，但是只显示一行这是一段很长的文字，但是只显示一行这是一段很长的文字，但是只显示一行`,
        time: 2000 + i
      })
  }
  return result;
};
const render= (value, index, record) => {
  return <IceEllipsis lineLimit={3} text={record.title} />;
};
const renderId = (value, index, record) => {
  return <IceEllipsis lineLimit={1} text={record.id} showTooltip={true} />;
};

class App extends Component {

  state = {
    dataSource: getData()
  }

  render() {
    return (
      <div>
        <Table
          dataSource={this.state.dataSource}
        >
            <Table.Column title="Id" cell={renderId} />
            <Table.Column title="Title" cell={render} />
            <Table.Column title="Time" dataIndex="time"/>
        </Table>
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);

测试

测试用例

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import IceEllipsis from '@icedesign/ellipsis';

class App extends Component {

  render() {

    const style = {
      width: '150px'
    };

    return (
      <div>
        <h2>超过两行显示两行带 tooltip</h2>
        <div style={style}>
          <IceEllipsis showTooltip={true} lineLimit={2} text="一个两个三个四个五个六个七个八个九个十个十一个" />
        </div>
        <h2>超过两行显示两行</h2>
        <div style={style}>
          <IceEllipsis showTooltip={false} lineLimit={2} text="一个两个三个四个五个六个七个八个九个十个十一个" />
        </div>
        <h2>不足三行显示三行</h2>
        <div style={style}>
          <IceEllipsis showTooltip={false} lineLimit={3} text="一个两个三个四个五个六个七个八个九个十个十一个" />
        </div>
        <h2>不足一行显示三行</h2>
        <div style={style}>
          <IceEllipsis showTooltip={false} lineLimit={3} text="一个两个三个" />
        </div>
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);