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>