HTML TD包装文本

我想包装添加到TD的文本。 我尝试过style="word-wrap: break-word;" width="15%" style="word-wrap: break-word;" width="15%" 。 但是包装没有发生。 100%宽度是强制性的吗? 我有其他的控件来显示只有15%的宽度可用。

包装TD文本

首先设置表格样式

 table{ table-layout: fixed; } 

然后设置TD样式

 td{ word-wrap:break-word } 

HTML表格支持“table-layout:fixed”css风格,用于防止用户代理将列宽调整为其内容。 你可能想要使用它。

我相信你已经遇到了22桌。 表格非常适合用表格结构来包装内容,并且他们在“拉伸”方面做得非常出色,以满足他们所包含内容的需求。

默认情况下,表格单元格将伸展以适应内容…因此您的文本只是使其更宽。

有几个解决scheme。

1.)您可以尝试在TD上设置最大宽度。

 <td style="max-width:150px;"> 

2.)你可以尝试把你的文本放在一个包装元素(例如一个范围)中,并对其设置约束。

 <td><span style="max-width:150px;">Hello World...</span></td> 

请注意,尽pipe旧版本的IE不支持最小/最大宽度。

由于IE本身不支持最大宽度,所以如果你想强制使用,你需要添加一个黑客。 有几种方法来添加黑客,这只是一个。

在页面加载时,仅对于IE6,获取表格的渲染宽度(以像素为单位),然后获得15%的宽度,并将该宽度作为该列中第一个TD的宽度(或TH,如果有头文件的话) 。

table-layout:fixed会解决扩展的单元格问题,但会创build一个新的。 IE默认会隐藏溢出,但Mozilla会将其渲染到盒子外面。

另一个解决scheme是使用: overflow:hidden;width:?px

 <table style="table-layout:fixed; width:100px"> <tr> <td style="overflow:hidden; width:50px;">fearofthedarkihaveaconstantfearofadark</td> <td> test </td> </tr> </table> 
 .tbl { table-layout:fixed; border-collapse: collapse; background: #fff; } .tbl td { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } 

致谢http://www.blakems.com/archives/000077.html

这对我来说有一些CSS框架(材料devise精简版[MDL])。

 table { table-layout: fixed; white-space: normal!important; } td { word-wrap: break-word; } 

实际上文本的包装自动发生在表格中。 错误的人在进行testing时假设假定像“ggggggggggggggggggggggggggggggggggggggggggggggggggggggg”这样的长string,并抱怨它没有换行。 实际上,英语里没有这么长的词,即使有,也很less有机会在这篇文章中使用。

尝试用“反对在预定的环境中迷信”等句子进行testing。

这可能是有效的,但在将来某个时候(如果不是立即的话)可能会有点麻烦。

 <style> tbody td span {display: inline-block; width: 10em; /* this is the nuisance part, as you'll have to define a particular width, and I assume -without testing- that any percent widths would be relative to the containing `<td>`, not the `<tr>` or `<table>` */ overflow: hidden; white-space: nowrap; } </style> ... <table> <thead>...</thead> <tfoot>...</tfoot> <tbody> <tr> <td><span title="some text">some text</span></td> <td><span title="some more text">some more text</span></td> <td><span title="yet more text">yet more text</span></td> </tr> </tbody> </table> 

正如其他人所指出的, span的基本原理是, <td>通常会扩展以容纳内容,而a可以被赋予并且预期保持一定的宽度。 overflow: hidden意在但不可能隐藏会导致<td>展开的内容。

我build议使用跨度的title属性来显示在视觉单元格中存在(或剪切)的文本,以便文本仍然可用(如果你不想/需要人们看到它,那么为什么它首先,我猜…)。

另外,如果你为td {...}定义一个宽度,td将会扩展(或者可能是契约,但是我怀疑它)来填充它的隐含宽度(因为我认为这似乎是table-width/number-of-cells ),指定的表格宽度似乎不会产生同样的问题。

缺点是用于演示的附加标记。

要使单元格的宽度与文本的最长单词完全相同,请将单元格的宽度设置为1px

 td { width: 1px; } 

这是实验性的 ,我在做试错的时候才知道这个

现场小提琴: http : //jsfiddle.net/harshjv/5e2oLL8L/2/

将类应用到你的TD,应用适当的宽度(记住留下其中的一个没有宽度,所以它假定宽度的其余部分),然后应用适当的样式。 将下面的代码复制并粘贴到编辑器中,然后在浏览器中查看它的function。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- td { vertical-align: top; } .leftcolumn { background: #CCC; width: 20%; padding: 10px; } .centercolumn { background: #999; padding: 10px; width: 15%; } .rightcolumn { background: #666; padding: 10px; } --> </style> </head> <body> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td class="leftcolumn">This is the left column. It is set to 20% width.</td> <td class="centercolumn"> <p>Hi,</p> <p>I want to wrap a text that is added to the TD. I have tried with style="word-wrap: break-word;" width="15%". But the wrap is not happening. Is it mandatory to give 100% width ? But I have got other controls to display so only 15% width available.</p> <p>Need help.</p> <p>TIA.</p> </td> <td class="rightcolumn">This is the right column, it has no width so it assumes the remainder from the 15% and 20% assumed by the others. By default, if a width is applied and no white-space declarations are made, your text will automatically wrap.</td> </tr> </table> </body> </html> 

这真的很好:

 <td><div style = "width:80px; word-wrap: break-word"> your text </div></td> 

您可以对所有的<div使用相同的宽度,或者在每种情况下调整宽度以随心所欲地打破文本。

这样你就不必用固定的表格宽度或者复杂的CSS来玩笑了。