Question

我有一张桌子，其中一行特别宽。

<table border=1>
 <tr><td>aaa</td><td>bbb</td></tr>
 <tr><td>aaa</td><td>bbb1234567890bbb</td></tr>
 <tr><td>aaa</td><td>bbb</td></tr>
</table>

我喜欢用td的CSS剪切长单元格的内容。我不想削减内容。

设置所需单元格的最大宽度会使单元格缩小，但内容不会缩小。因此，内容与单元格重叠。

<table border=1>
 <tr><td>aaa</td><td>bbb</td></tr>
 <tr><td>aaa</td><td style="max-width: 30px;">bbb1234567890bbb</td></tr>
 <tr><td>aaa</td><td>bbb</td></tr>
</table>

我想要一个缩小的单元格，没有重叠（也没有单词包装）。

有什么想法吗？

Answer 1

根据您要获得的结果，可以使用

text-overflow: ellipsis;

或

text-overflow: clip;

以使内容不会与单元格重叠。

更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Answer 2

我不确定我是否理解正确。但我认为溢出：与文本溢出一起隐藏：省略号可能会解决您的问题。

  td {
      max-width:100px;
      overflow: hidden;
      text-overflow:ellipsis;
  }

https://plnkr.co/edit/Gti1qhErZlTMjr8m7sIG?p=preview

Answer 3

您需要在td上设置溢出属性。您尚未说出要如何处理溢出，所以我展示了三个选项：

溢出滚动
隐藏溢出
省略号隐藏了溢出

td {
  max-width: 30px;
  white-space: nowrap;
}

.with-overflow {
  overflow: auto;  /* adds scollbars if needed */
}

.without-overflow {
  overflow: hidden;  /* just hides any overflow */
}

.with-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;   /* just hides any overflow and appends ... to the end of the string */
}

<table border=1>
  <tr>
    <td>aaa</td>
    <td>bbb</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td class="with-overflow">adds scroll bars</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td class="without-overflow">without overflow</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td class="with-ellipsis">with ellispsis</td>
  </tr>
</table>

More information about overflow

More information about text-overflow

HTML / CSS：缩小单元格及其内容

3 个答案: