html - 设置表格内文本的最大宽度 td

Question

我有一个包含两列的表格。第二列包含其中包含一些文本的单元格，然后是两个可以单击以执行某些操作的内联图标。然而，如果文本太长，内联图标开始看起来很奇怪，因为它们掉落/换行到下一行。代码基本上是:

<td class="column-2">
    <span>...My very long text goes here...</span>
    <span class="inline-icon-one"></span>
    <span class="inline-icon-two"></span>
</td>

This is what the normal cell should look like

This is what it looks like with the long text

我希望能够设置单元格内文本的最大宽度。因此，如果单元格为 300 像素，我如何将文本宽度设置为最大值，比方说，200 像素，这样我的图标就有 100 像素了。这将防止内联图标被错误定位。我也不希望文本换行，所以我可以接受它只是结束(或者甚至有一个省略号)。

我曾尝试直接为文本范围设置“最大宽度”和“宽度:75%”属性，但这没有用(它似乎没有任何效果)。

这是我为该列使用的 CSS:

td.column-2 {
    padding-left: 20px;
    height: 55px;
    width: 360px;
    vertical-align: middle;
    word-wrap: break-word;
    border-right: 1px solid transparent;
}

所以 column/td 宽度设置为 360px，所以我需要能够在代表文本的跨度上设置一个较小的最大宽度，或者如果可以设置文本开始换行的时间。

Answer 1

您需要为您的单元格设置一个宽度，并需要您的第一个跨度来包裹文本。如果您指定一个相对宽度(例如:%)，您将必须使 wrapper(td) 宽度固定。