飞冰 DEMO 预览

参数名	说明	必填	类型	默认值	备注
ellipsis	超出文案显示内容	否	string	……
lines	行数	否	string	1
length	显示中文字数(两个英文字母或数字当一个中文字符)	否	number	undefined	若和length同时设置，则优先或者length
tooltip	是否hover显示内容	否	bool	false
tooltip	tooltip的属性	否	{}	{}

限制行数

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Ellipsis from "../src/index";
import { Card } from '@alifd/next';

const text = "测试我是好孩子测试我是好孩子测试我是好孩子测试我是好孩子测试我是好孩子测试我是好孩子测试我是好孩子测试我是好孩子测试我是好孩子测试我是好孩子"

class App extends Component {
  render() {
    return (
      <div>

        <p>通过设置 lines 属性指定最大行数，如果超过这个行数的文本会自动截取。但是在这种模式下所有 children 将会被转换成纯文本。</p>
        <p>并且注意在这种模式下，外容器需要有指定的宽度（或设置自身宽度）。</p>
        <Card title="两行" contentHeight="auto" style={{width: 200}}>
          <Ellipsis lines={2} tooltip tooltipProps={{followTrigger:true,align:'t'}}>{text}</Ellipsis>
        </Card>

        <Card title="字数不满足整行" contentHeight="auto" style={{width: 200}}>
          <Ellipsis lines={2} tooltip >just test</Ellipsis>
        </Card>
      </div>
    );
  }
}

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

.next-card {
   margin-bottom: 20px;
}

限制字数

限制中文字数（两个英文字母或数字当一个中文字符）。

通过设置 length 属性指定文本最长长度，如果超过这个长度会自动截取。length 优先于lines。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Ellipsis from "../src/index";
import { Card } from '@alifd/next';

const text = "测试我是好孩子测试我是好孩子测试我是好孩子测试我是好孩子测试我是好孩子测试我是好孩子测试我是好孩子测试我是好孩子测试我是好孩子测试我是好孩子";

class App extends Component {
  render() {
    return (
      <div>
        <Card title="超过20个汉字，不展示 tooltip" contentHeight="auto">
          <Ellipsis length={20}>{text}</Ellipsis>
        </Card>

        <Card title="超过20个汉字，展示 tooltip" contentHeight="auto">
          <Ellipsis length={20} tooltip tooltipProps={{followTrigger:true,align:'t'}}>{text}</Ellipsis>
        </Card>

        <Card title="刚好20汉字" contentHeight="auto">
          <Ellipsis length={20} tooltip tooltipProps={{followTrigger:true,align:'t'}}>测试我是好孩子测试我是好孩子测试我是好孩</Ellipsis>
        </Card>

        <Card title="少于20汉字" contentHeight="auto">
          <Ellipsis length={20} tooltip>测试我是好孩子</Ellipsis>
        </Card>

        <Card title="两个英文字母或数字算一个汉字" contentHeight="auto">
          <Ellipsis length={10} tooltip>测试我是好孩子abcdefgh</Ellipsis>

          <Ellipsis length={10} tooltip>测试我是好孩子abcdef</Ellipsis>

        </Card>

        <Card title="内容为空" contentHeight="auto">
          <Ellipsis length={20} tooltip>{null}</Ellipsis>
        </Card>
      </div>
    );
  }
}

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

.next-card {
    margin-bottom: 20px;
}

.demo-cate {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

.demo-inst {
    margin-left: 20px;
    margin-bottom: 10px;
    padding: 20px;
    background: #f7f7f7;
}

ellipsi

API

DEMO 列表

限制行数

限制字数