将html TD宽度设置为字符数答案

【问题标题】：Set html TD width to number of characters将html TD宽度设置为字符数
【发布时间】：2013-03-02 11:58:06
【问题描述】：

我想将 TD 宽度设置为字符数，例如，如果我设置为 11，则只能显示 11 个字符，其余字符必须在新行中。我尝试了 width 属性，但它在不同的浏览器/分辨率中显示不同。

<table border="1">
    <tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 11-MAR-2013, 13-MAR-2013
    </td>
    </tr>
<tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 11-MAR-2013, 13-MAR-2013
    </td>
    </tr>
<tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 04-MAR-2013, 05-MAR-2013, 07-MAR-2013, 11-MAR-2013, 13-MAR-2013, 12-MAR-2013, 08-MAR-2013, 06-MAR-2013
    </td>
    </tr>
<tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 11-MAR-2013, 13-MAR-2013
    </td>
    </tr>
<tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 06-MAR-2013, 08-MAR-2013, 12-MAR-2013, 13-MAR-2013, 11-MAR-2013, 07-MAR-2013, 05-MAR-2013, 01-MAR-2013
    </td>
    </tr>
    <table>

将表格中的日期显示为一行，

28-FEB-2013, 06-MAR-2013, 08-MAR-2013, 12-MAR-2013,

我希望它显示为

   28-FEB-2013,
   11-MAR-2013,
   13-MAR-2013,

每个日期都必须换行。

【问题讨论】：

对我来说，TD 的内容就像一个日期列表。为什么不声明 OL 或 UL 并设置项目样式？这样您就不必将其视为非结构化文本，而是创建结构和样式。

标签： html css html-table

【解决方案1】：

我能想到的最简单的解决方案是：

table tr td+td+td {
  font-size: 100%;
  font-family: monospace;
  width: 8em;
}

http://jsbin.com/elaleg/1/edit

【讨论】：

它有效。无论如何不使用等宽字体并获得相同的结果？
我认为使用等宽是强制性的——如果你想在不改变内容的情况下这样做。
似乎 em 是字符的高度，而不是宽度。您应该使用 ch 代替。在此处查看第二个答案：stackoverflow.com/questions/8186457/specify-width-in-characters

【解决方案2】：

您可以使用以下样式将文本包装在标签或其他任何内容中：

display: inline-block; width: 11em;

查看JsFiddle

【讨论】：

【解决方案3】：

<html>
 <body>
   <table border="1">
    <tr>
        <td style="width:103px;word-wrap:break-word;">28-FEB-2013, 11-MAR-2013, 13-MAR-2013</td>
    </tr>
</table>
 </body>
</html>

试试这个，我希望你能得到解决方案

【讨论】：

【解决方案4】：

你可以check this

或有效地尝试 css 样式的空白

white-space: nowrap;

【讨论】：

【解决方案5】：

这是一种对我有用的解决方案。假设 td 指定了一个类名（比如 payerName），并且表有一个 id（比如 sortable）。

$(".payerName").css({"white-space":"nowrap"});
$(".payerName").css({"overflow":"hidden"});
$(".payerName").css({"text-overflow":"ellipsis"});
$("#sortable").css("table-layout","fixed");

这是一组可用于避免长字符串进入 td 的步骤。 ellipsis 属性将在字符串/值的末尾添加一个“...”。您可以添加 title 属性，以便在鼠标悬停时显示实际值。

希望这会有所帮助！

【讨论】：