Ellipsis

When the text is too long, the Ellipsis automatically shortens it according to its length or the maximum number of lines.

Usage:

import Ellipsis from 'ant-design-pro/lib/Ellipsis';

Learning more to visit: Using Pro Components Alone

Examples

Truncate according to the number of character

length attribute specifies the maximum length where the text will automatically be truncated when exceeded.

expand codeexpand code
import Ellipsis from 'ant-design-pro/lib/Ellipsis';

const article =
  'There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.';

ReactDOM.render(
  <div>
    <Ellipsis length={100}>{article}</Ellipsis>
    <h4 style={{ marginTop: 24 }}>Show Tooltip</h4>
    <Ellipsis length={100} tooltip>
      {article}
    </Ellipsis>
  </div>,
  mountNode
);
Truncate according to the number of rows

lines attribute specifies the maximum number of rows where the text will automatically be truncated when exceeded. In this mode, all children will be converted to plain text.

Also note that, in this mode, the outer container needs to have a specified width (or set its own width).

expand codeexpand code
import Ellipsis from 'ant-design-pro/lib/Ellipsis';

const article = (
  <p>
    There were injuries alleged in three <a href="#cover">cases in 2015</a>, and a fourth incident
    in September, according to the safety recall report. After meeting with US regulators in
    October, the firm decided to issue a voluntary recall.
  </p>
);

ReactDOM.render(
  <div style={{ width: 200 }}>
    <Ellipsis tooltip lines={3}>
      {article}
    </Ellipsis>
  </div>,
  mountNode
);

API#

Property Description Type Default
tooltip tooltip for showing the full text content when hovering over boolean -
length maximum number of characters in the text before being truncated number -
lines maximum number of rows in the text before being truncated number 1
fullWidthRecognition whether consider full-width character length as 2 when calculate string length boolean -
NoticeIconNumberInfo