如何在不使用最大宽度的情况下在表格单元格上使用省略号？答案

【问题标题】：How can i have elispsis on my table cell without using max-width?如何在不使用最大宽度的情况下在表格单元格上使用省略号？
【发布时间】：2022-01-28 07:15:28
【问题描述】：

我有下表


    <table>
        <tr>
            <td>Long name name name name name name</td>
        </tr>
        <tr>
            <td>Some shorter</td>
        </tr>
    </table>

还有我的css

table {
    border: 1px solid black;
}

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

我需要在我的桌子上添加省略号，这就是我使用 max-width: 100px; 和white-space: nowrap; 的原因

但这里的问题是我需要修复我的 td

td {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

如果我这样做比我的 td 具有固定宽度但我失去了省略号。有什么方法可以做到这一点吗？

【问题讨论】：

你想对ellipsis做什么？
我的名字很长，所以我不能在表格中显示全名 - 我显示省略号并悬停全名...
这能回答你的问题吗？ CSS text-overflow in a table cell?
不，彼得，我在那里尝试了一些罕见的答案

标签： html css

【解决方案1】：

使用table-layout:fixed;

table {
    border: 1px solid black;
    width:100%;
    table-layout:fixed;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    <table>
        <tr>
            <td>Long name name name name name name Long name name name name name name Long name name name name name name Long name name name name name name Long name name name name name name</td>
        </tr>
        <tr>
            <td>Some shorter</td>
        </tr>
    </table>

【讨论】：

【解决方案2】：

您可以使用-webkit-line-clamp 实现此目的。您可以阅读有关先决条件的更多信息here

table {
  border: 1px solid black;
}

td {
  max-width: 100px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

<table>
  <tr>
    <td>Long name name name name name name</td>
  </tr>
  <tr>
    <td>Some shorter</td>
  </tr>
</table>

【讨论】：

感谢您的评论。还有其他更通用的方法吗？