css - 如何让一个非固定的表格单元格显示省略号

Question

我有一个有趣的 CSS 问题要问你们中的一些 CSS 奇才。我有一个包含用户生成内容的表格，我想将长列限制为最大宽度。表格不是固定布局，列宽也是用户指定的，但默认情况下应具有最大宽度。

<table>
  <thead>
    <tr><td>Header 1</td><td>Header 2</td></tr>
  </thead>
  <tbody>
    <tr><td>Text</td><td>1</td></tr>
    <tr><td>Text</td><td>2</td></tr>
    <tr><td>Long Text Here</td><td>3</td></tr>
  </tbody>
</table>

我将 overflow: hidden、white-space: nowrap 和 text-overflow: ellipsis 添加到 header 的 css 类，并在上面的 html 文本“Long Text Here”将该列的宽度推出。但这使得列宽只能是该文本长度或更长。

除了使用固定布局外，我还能做什么来缩小单元格并显示省略号？

谢谢!

Answer 1

一个简单的选择是在列上设置最大宽度，这样一些非常长的条目就不会使它变得可笑地宽。例如，要对第一列执行此操作:

td:first-child {
  max-width: 5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
  <thead>
    <tr><td>Header 1</td><td>Header 2</td></tr>
  </thead>
  <tbody>
    <tr><td>Text</td><td>1</td></tr>
    <tr><td>Text</td><td>2</td></tr>
    <tr><td>Really, Ridiculously Long Text Here</td><td>3</td></tr>
  </tbody>
</table>

(您可以使用 :nth-child() 或类来限制其他列。)

此解决方案需要在 CSS 中设置最大宽度，但是，这对于动态内容可能不是很有用。相反，您可以直接在 HTML 的 style 属性中设置它，使用 JavaScript 或您的模板系统更容易做到这一点:

td:first-child, th:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
  <thead>
    <tr><th style="max-width: 5em">Header 1</th><th>Header 2</th></tr>
  </thead>
  <tbody>
    <tr><td style="max-width: 5em">Text</td><td>1</td></tr>
    <tr><td style="max-width: 5em">Text</td><td>2</td></tr>
    <tr><td style="max-width: 5em">Really, Ridiculously Long Text Here</td><td>3</td></tr>
  </tbody>
</table>