Zenn
🌊

[Ant Design] Tagのテキストが長いときに省略させる

2023/11/24に公開
antd
tech

Ant DesignのTagにはめちゃ長いテキストが入ってしまう

こんな感じになっちゃうのを

こうする

実装方法

    <Tag closeIcon onClose={preventDefault} style={{display: "flex"}}>
      <span class="ellipsis">
        とてもすごくめちゃ長いロングなテキスト
      </span>
    </Tag>
  </Space>

.ellipsis {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 50px; /*お好きな値に*/
}

こうすることで、クローズアイコンを出したままめちゃ長いテキストを省略することができる。

参考

https://ant.design/components/tag

Discussion