Ellipsis 多行文字控制

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/ellipsis@1.0.4 -S

多行文字控制展示组件。

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

参数（props）

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

代码示例

一行文字用法

本 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);

相关区块

暂无相关区块