如何在 React 中截断 Bootstrap Table 单元格中的文本？

Question

我有一个 Bootstrap Table 组件，table 中的一个单元格是 URL。 URL 可能很长，所以我想用省略号自动截断它以适合单元格。

Here's an example of what the issue looks like.

您可以看到 URL 和 Table 超出了它们所在的 Card 组件的宽度。

我设法想出了一个修复方法，但它并不理想。这是我的代码：

<div>
  <Accordion>
    {this.state.previous_entries.map(pe =>
      <Card key={pe.listing.id}>
        <CustomToggle eventKey={pe.listing.id}>{[formatAddress(pe), pe.listing.createdAt]}</CustomToggle>
        <Accordion.Collapse eventKey={pe.listing.id}>
          <Card.Body>
            <Table bordered style={{marginBottom: 0}}>
              <tbody>
                <tr>
                  <td className="bg-light">URL</td>
                  <td colSpan="3">
                    <!-- THIS PART -->
                    <a href={pe.listing.url}>
                      <span style={{textOverflow: "ellipsis", overflow: "hidden", whiteSpace:"nowrap", position: "fixed", maxWidth: "14%"}}>{ pe.listing.url }</span>
                    </a>
                  </td>
                </tr>
                <tr>
                  <td className="bg-light">Monthly Rent</td>
                  <td>{ pe.listing.monthly_rent ? pe.listing.monthly_rent + "万円" : "N/A" }</td>
                  <td className="bg-light">礼金</td>
                  <td>{ pe.listing.reikin !== null ? (pe.listing.reikin !== 0 ? pe.listing.reikin + "ヶ月" : pe.listing.reikin) : "N/A" }</td>
                </tr>
                <tr>
                  <td className="bg-light">敷金</td>
                  <td>{ pe.listing.security_deposit !== null ? (pe.listing.security_deposit !== 0 ? pe.listing.security_deposit + "ヶ月" : pe.listing.security_deposit) : "N/A" }</td>
                  <td className="bg-light">面積</td>
                  <td>{ pe.listing.square_m ? pe.listing.square_m + "m²" : "N/A" }</td>
                </tr>
                <tr>
                  <td className="bg-light">Closest Station</td>
                  <td>{ pe.listing.closest_station ? pe.listing.closest_station : "N/A" }</td>
                  <td className="bg-light">Walking Time</td>
                  <td>{ pe.listing.walking_time ? pe.listing.walking_time + "分" : "N/A" }</td>
                </tr>
                <tr>
                  <td className="bg-light">Availability</td>
                  <td>{ pe.listing.availability ? pe.listing.availability : "N/A" }</td>
                  <td className="bg-light">Interest</td>
                  <td>{ pe.property.interest ? pe.property.interest : "N/A" }</td>
                </tr>
              </tbody>
            </Table>
          </Card.Body>
        </Accordion.Collapse>
      </Card>
    )}
  </Accordion>
</div>

我的 'fix' 正在将 maxWidth: "14%" 样式添加到包含 URL 的范围中。但这并不是在所有情况下都有效，具体取决于 window 的大小。这是有道理的，因为它是一个静态值。

Here's what my 'fix' looks like.

有人知道自动截断 URL 以使 Table 不超过卡片的更好方法吗？

Answer 1

这种方法在涉及各种屏幕尺寸时更加灵活，因为您没有为 text-overflow 指定宽度。

table {
  table-layout: fixed;
  width: 100%;
}

td>a {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}

td>a>span {
  white-space: nowrap;
}

<div>
  <Accordion>
    {this.state.previous_entries.map(pe =>
    <Card key={pe.listing.id}>
      <CustomToggle eventKey={pe.listing.id}>{[formatAddress(pe), pe.listing.createdAt]}</CustomToggle>
      <Accordion.Collapse eventKey={pe.listing.id}>
        <Card.Body>
          <Table bordered style={{marginBottom: 0}}>
            <tbody>
              <tr>
                <td className="bg-light">URL</td>
                <td colSpan="3">
                  <!-- THIS PART -->
                  <a href={pe.listing.url}>
                    <span style={{textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap", position: "fixed", maxWidth: "14%"}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
                  </a>
                </td>
              </tr>
              <tr>
                <td className="bg-light">Monthly Rent</td>
                <td>{ pe.listing.monthly_rent ? pe.listing.monthly_rent + "万円" : "N/A" }</td>
                <td className="bg-light">礼金</td>
                <td>{ pe.listing.reikin !== null ? (pe.listing.reikin !== 0 ? pe.listing.reikin + "ヶ月" : pe.listing.reikin) : "N/A" }</td>
              </tr>
              <tr>
                <td className="bg-light">敷金</td>
                <td>{ pe.listing.security_deposit !== null ? (pe.listing.security_deposit !== 0 ? pe.listing.security_deposit + "ヶ月" : pe.listing.security_deposit) : "N/A" }</td>
                <td className="bg-light">面積</td>
                <td>{ pe.listing.square_m ? pe.listing.square_m + "m²" : "N/A" }</td>
              </tr>
              <tr>
                <td className="bg-light">Closest Station</td>
                <td>{ pe.listing.closest_station ? pe.listing.closest_station : "N/A" }</td>
                <td className="bg-light">Walking Time</td>
                <td>{ pe.listing.walking_time ? pe.listing.walking_time + "分" : "N/A" }</td>
              </tr>
              <tr>
                <td className="bg-light">Availability</td>
                <td>{ pe.listing.availability ? pe.listing.availability : "N/A" }</td>
                <td className="bg-light">Interest</td>
                <td>{ pe.property.interest ? pe.property.interest : "N/A" }</td>
              </tr>
            </tbody>
          </Table>
        </Card.Body>
      </Accordion.Collapse>
    </Card>
    )}
  </Accordion>
</div>

如何在 React 中截断 Bootstrap Table 单元格中的文本？

How to truncate text in cell in Bootstrap Table in React?

javascript

css

truncate

react-bootstrap

react-table