html - td 带空白 :nowrap text exceed outside of the cell

Question

我正在尝试对 td 属性使用 nowrap，以便可以在第一个表中看到结果:

如您所见，在第一张 table 上，它包裹得很好。但是在第二张表上，第一个“td”超过了第二个“td”，因为内容太长了。我该如何解决？这是我的代码:

<table cellspacing="0">
    <tr>
        <td class="content" style="width: 1%; white-space: nowrap; max-width:300px">
            /*php content*/
        </td>
        <td class="author">
            /*php content*/
        </td>
    </tr>
</table>

为了更清楚地说明，这是我正在尝试做的事情:一开始我创建了一个列表，每个元素都是一个表，下面是每个列表的代码:

<div class="post">
<table cellspacing="0">
    <tr>
        <td class="content" style="max-width:300px">
        /* php content */
        </td>
        <td class="author">
            /* php content */
        </td;>
    </tr>
</table>
<div class="nav">
        /* php content for navigation buttons */
</div>

但是结果是这样的:

正如您在第一个列表中看到的，“测试 1”和“管理待办事项”状态之间有空格。我想删除它，因此我使用 nowrap 方法。如果这不可能，是否有任何替代方法？

Answer 1

如果我正确解释了问题并理解了您的预期结果，我建议您使用 text-overflow

由于您将 300px 指定为 td.content 的宽度并且仍然希望内容仅在一行中呈现，我想唯一的解决方案是隐藏超出的内容。可以使用这个简单的 CSS 来完成:

.content{
  text-overflow:ellipsis;
  overflow:hidden;
}