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

我希望能够在单元格中设置文本的最大宽度。因此，如果单元格是300px，我怎么能将文本宽度设置为最大值，比方说200px，这样我的图标就剩下100px。这样可以防止内联图标被错误定位。我也不希望文本换行，所以我很好用它结束（或者甚至可能有一个省略号）。

我已尝试直接将“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;
}

因此列/ td宽度设置为360px，因此我需要能够在代表文本的范围上设置较小的最大宽度，或者是否可以在文本开始包装时设置。 / p>

Answer 1

您需要一个单元格的宽度以及包装文本的第一个跨度。如果指定相对宽度（例如：％），则必须使包装（td）宽度固定。

Answer 2

您可以使用javascript。但首先要这样做。将标识添加到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纯粹地做到这一点。

谢谢你们！

设置表格

3 个答案: