将html TD宽度设置为字符数

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

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

每个日期必须在一个新的生产线。

来源

2013-03-14 NEO

TD的内容看起来像是我的日期列表。为什么不宣布OL或UL并设计这些项目？这样，你不必把它当作非结构化文本，但是你创建了它的结构和样式。 – Kwebble 2013-03-14 08:32:03

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

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

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

来源

2013-03-14 08:31:41 Saram

它的工作原理。反正有没有使用等宽字体并得到相同的结果？ – NEO 2013-03-14 08:50:27

我使用等宽字体是强制性的 - 如果你想不做改变内容。 – Saram 2013-03-14 08:54:56

看起来em是字符的高度，而不是宽度。您应该使用ch代替。在这里查看第二个答案：http://stackoverflow.com/questions/8186457/specify-width-in-characters – 2015-10-07 14:31:24

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

试试这个，我希望你会得到解决

来源

2013-03-14 08:27:19

您可以在包装标签或任何其他与下面的样式文本：

display: inline-block; width: 11em;

检查JsFiddle

来源

2013-03-14 08:27:36 Sergio

你可以check this

或者试试css风格white-spac Ë有效

white-space: nowrap;

来源

2013-03-14 08:27:44 Sandy

这里是一个解决方案，它为我工作。假设td具有指定的类名称（称为payerName），并且该表具有一个id（称为可排序）。

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

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

希望这会有所帮助！

来源

2016-08-04 11:23:09 RishikeshD

将html TD宽度设置为字符数

回答

相关问题