Ellipsis 更多展示

TIP

• 更多展示提示

基本使用

tsx

import { Divider } from "shineout";
import { Ellipsis } from "@lite-code/pro-shineout";

export default () => {
  return (
    <>
      <Ellipsis content="这是一个短的文本，没有超出则不会展示...和悬浮提示" />
      <Divider />
      <Ellipsis
        popoverWidth={500}
        content="基本：这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本"
      />
      <Divider />
      <Ellipsis
        rows={2}
        popoverProps={{
          type: "info",
        }}
        style={{ width: 500 }}
        content="这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本,这是一个很长的文本"
      />
    </>
  );
};