带有空格的td：nowrap文本超出单元格

Question

我试图在td属性上使用nowrap，以便在第一个表上看到结果：

正如你所看到的，在第一张桌子上，它包裹得很好。 但是在第二张桌子上第一张＆＃34; td＆＃34;超过它的第二个＆＃34; td＆＃34;因为内容太长了。 我该如何解决？ 这是我的代码：

<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>

但结果是这样的：

正如您在第一个列表中看到的那样，＆＃34;测试1和＃34;之间有空格。和＃34; admin todo＆＃34;状态。 我想删除它，因此我使用nowrap方法。如果这不可能，还有其他方法吗？

Answer 1

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

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

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