antd长文本上的省略号

Question

我正在为我的前端使用 antd 库。 我想以以下格式显示地址。 我怎样才能用 antd 库做到这一点？

地址文本较小时

123 Example Street, #111 Toronto, ON

地址文本较长时

123 Long long Long Long Long 
Long Long Long long Long Long
Long Long Long..., #111 Toronto, ON

我的代码

<div style={{ margin: 10, width: "280px" }}>
  <div style={{ display: "flex", flexWrap: "wrap" }}>
    <Paragraph
      strong
      ellipsis={{
        rows: 3,
        suffix: ", #123"
      }}
    >
      Very very very very very very very very very very very very very very
      very very very very very long long long long address
    </Paragraph>
    <span>
      <Text type="secondary">Toronto, ON</Text>
    </span>
  </div>
</div>

我的代码的 output

适用于短地址文本

我的代码解释

父元素的宽度是固定的，因此当地址文本很长时，它应该换行三行，如果文本长于三行，则应该显示一个省略号。

链接到CodeSandbox

Answer 1

如果“地址文本”太长而无法正确显示，我会截断它：

<div style={{ margin: 10, width: "280px" }}>
  <div style={{ display: "flex", flexWrap: "wrap" }}>
    <Paragraph
      strong
      ellipsis={{
        rows: 3,
        suffix: ", #123"
      }}
    >
      {(adressText.length > n) ? adressText.substr(0, n-1) + '&hellip;' : adressText;}
    </Paragraph>
    <span>
      <Text type="secondary">Toronto, ON</Text>
    </span>
  </div>