Question

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

<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,

每个日期必须换行。

Answer 1

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

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

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

Answer 2

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

display: inline-block; width: 11em;

检查JsFiddle

Answer 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>

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

Answer 4

你可以check this

或有效地尝试css风格的空白

white-space: nowrap;

Answer 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的步骤。省略号属性将在字符串/值的末尾添加“...”。您可以添加title属性，以便在鼠标悬停时显示实际值。

希望这有帮助！

将html TD宽度设置为字符数

5 个答案: