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>

我在标题的CSS类中添加了overflow: hidden，white-space: nowrap和text-overflow: ellipsis，在上面的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>

Answer 2

嗨，我不确定你是否要问这样的事情

https://jsfiddle.net/MAXXALANDER/o6x1nt93/15/

in Particle.__subclasses__()

如何获取非固定表格单元格以显示省略号

2 个答案: