react antd 實現 超出長度省略 鼠標懸停顯示完整信息

背景

• 在頁面顯示日志異常信息 但是 不能太長影響頁面布局 需要顯示 固定長度並提示

查閱文檔

• Typography.Text#

• ellipsis 自動溢出省略，為對象時不能設置省略行數、是否可展開

代碼實現

<Text
        style={ellipsis ? { width: 100 } : undefined}
        ellipsis={ellipsis ? { tooltip: ' test api text !' } : false}
      >
       test api text  test api text   test api text  test api text  test api text 
      </Text>