设置表格中文本的最大宽度 td

Posted 2023-03-06

【中文标题】设置表格中文本的最大宽度 td

【英文标题】：Set max-width of text within a table td

【发布时间】：2018-08-07 08:52:27

【问题描述】：

我有一个两列的表。第二列包含包含一些文本的单元格，然后是两个可以单击以执行某些操作的内联图标。但是，如果文本太长，则内联图标会在下降/换行到下一行时开始看起来很奇怪。代码基本上是：

<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，所以我需要能够在表示文本的 span 上设置较小的 max-width，或者是否可以设置文本开始换行的时间。

【问题讨论】：

你的代码在哪里？

为 column-2 类添加了 html 和 CSS。

【参考方案1】：

您需要为您的单元格设置一个宽度，以及您的第一个环绕文本的跨度。如果您指定相对宽度（例如：%），则必须将 wrapper(td) 宽度固定。

【参考方案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 标记中使用的文本的字体大小。如果您还没有定义文本的大小，那么现在就定义。

【参考方案3】：

我认为我找到了最适合我的情况的解决方案：

我刚刚添加了第三列来保存内联图标。我将第二行的宽度减小到 300 像素，并将第三列的宽度设置为 60 像素。所以它最终是这样的：

<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 来实现。

谢谢大家！