在td中，如何将“文本溢出：省略号”应用于某些元素，但不是全部？

Question

例如，在td中，我有“产品名称”，“说明”显示如下：

我希望“产品”仅具有省略号，而没有“描述”，我尝试过：

    <table border="1" style="width:100%;">
      <tr>
        <td><img src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1"/></td>
      <td>
      <p style="width:100%;max-width:0;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">Product name : very very very very very very very very very long product name</p>
      <p>Description : This is a paragraph about the product detail.</p>
      </td>
    </tr>
  </table>

，但是它不起作用。我该怎么办？

注意：我发现我可以用另一个表将产品围起来：

<table border="1" style="width:100%;">
  <tr>
    <td><img src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1"/></td>
    <td>
    <table style="width:100%;"><tr><td style="max-width:0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">Product name : very very very very very very very very very long product name</td></tr></table>
    Description : This is a paragraph about the product detail.
    </td>
  </tr>
</table>

但是我认为这个解决方案太复杂了，有没有更简单的解决方案？

Answer 1

要使text-overflow: ellipsis工作，您需要为width应该工作的元素定义text-overflow: ellipsis。在下面，我放置了您的固定代码段。

<table border="1" style="width:100%">
  <tr>
    <td>
    <img src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1" />
    </td>
    <td>
      <p style="width:300px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">Product name : very very very very very very very very very long product name</p>
      <p>Description : This is a paragraph about the product detail.</p>
    </td>
  </tr>
</table>

Answer 2

在您的table-layout:fixed;中添加<table>可以修复您的代码。这通常是在您将<table>用作容器时发生的。

通过将table-layout:fixed;添加到<table>来使表和列的宽度由table和col的宽度或单元格第一行的宽度来设置。这样做是<td>将检测<table>的宽度，而text-overflow: ellipsis将基于<table>的宽度触发。

解决方案1：

您可以设置第一列<td>和<img>的宽度，以便<img>的宽度能够响应。

<table border="1" style="width:100%;
  table-layout:fixed;">
      <tr>
        <td style="width:20%;"><img style="width:100%;" src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1"/></td>
      <td>
      <p style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">Product name : very very very very very very very very very very very very very very very very very very very very very long product name</p>
      <p>Description : This is a paragraph about the product detail.</p>
      </td>
    </tr>
  </table>

解决方案2：

您可以设置第二列<td>和<img>的宽度，以便<img>的宽度能够响应。

<table border="1" style="width:100%;
  table-layout:fixed;">
      <tr>
        <td><img style="width:100%" src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1"/></td>
      <td style="width:80%">
      <p style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">Product name : very very very very very very very very very very very very very very very very very very very very very long product name</p>
      <p>Description : This is a paragraph about the product detail.</p>
      </td>
    </tr>
  </table>