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