在 table td 内设置文本的最大宽度

Question

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

<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 像素了。这将防止内联图标被错误定位。我也不希望文本换行，所以我可以接受它只是结束（或者甚至有一个省略号）。

我试过直接给text span设置一个'max-width'和'width: 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) 宽度固定。

Answer 2

您可以使用 javascript。但是先做这个。将 id 添加到 td 标签并将其值设置为 td1

<script>
var a = document.getElementById("td1");
var b = a.innerText.length * (your font size) + "px";
a.style.width=b;
</script>

将您的字体大小替换为 td 标记中使用的文本的字体大小。如果您还没有定义文本的大小，那么现在就定义吧。

Answer 3

我认为我找到了适合我的案例的最佳解决方案：

我刚刚添加了第 3 列，用于放置内联图标。我将第二行的宽度减小到 300px，并将第三列的宽度设置为 60px。所以它最终是这样的：

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

与CSS:

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

有一个答案提到使用 javascript，但我希望在我的情况下避免这种情况，并且能够纯粹通过 HTML 和 CSS 来完成。

谢谢大家！

在 table td 内设置文本的最大宽度

Set max-width of text within a table td

html

css

html-table

width