表列没有文本换行

重要提示：此应用程序不支持Internet Explorer。我将很高兴能在Chrome和Firefox中使用的解决方案。

我正在使用动态代码（velocity-spring）来生成一个html表格。 列数不固定（所以我不能为标题指定宽度）。第二列值始终是链接。这样的结构：

<table> 
<tr>  
    <th ALIGN=CENTER> heading 1 </th> 
    <th ALIGN=CENTER> heading 2 </th> 
    ... ... .... .. .. .. 
    <th ALIGN=CENTER> heading n </th> 
</tr> 
<tr ALIGN=CENTER>  
    <td ALIGN=CENTER> value 1 </td> 
    <td ALIGN=CENTER> <a href="mypage.html">value 2</a> </td> <!-- this column is a link --> 
    ... ... .... .. .. .. 
    <td ALIGN=CENTER> value n </td> 
</tr> 
.... now more rows followed 
</table>

现在的问题是，如果第二列（超链接）包含一个“loooooooooooooooooooooooong”值（无空格）的其他各列包裹它们的文本。请帮助我使用css/jQuery/Javascript代码，这样我就可以使用来自后端的值来维护表格的结构。

UPDATE：

得到的答案后，我更新了我的表的代码像下面（正如他们所说的指定width和使用word-break）：

<table> 
<tr>  
    <th ALIGN=CENTER> heading 1 </th> 
    <th style="word-wrap:break-word; width: 200px;" ALIGN=CENTER> heading 2 </th> 
    ... ... .... .. .. .. 
    <th ALIGN=CENTER> heading n </th> 
</tr> 
<tr ALIGN=CENTER>  
    <td ALIGN=CENTER> value 1 </td> 
    <td ALIGN=CENTER style="word-wrap:break-word; width: 200px;"> <a href="mypage.html">value 2</a> </td> <!-- this column is a link --> 
    ... ... .... .. .. .. 
    <td ALIGN=CENTER> value n </td> 
</tr> 
.... now more rows followed 
</table>

我知道我必须接受并投了有用的答案，这样做。但请帮助我。我无法发送您的实时网址。很快就会附上屏幕截图。

Screenshot

来源

2012-03-26 buggy

word-wrap将起作用，但您需要为该列指定width。

来源

2012-03-26 07:54:44

请给我一些更多的方法，我已经更新了帖子。我会永远感谢你。投票起来 – buggy 2012-03-26 08:46:11

啊需要15分才能投票。肯定会做。 – buggy 2012-03-26 08:47:04

我已经添加了截图，你可以看看这个？ – buggy 2012-03-26 09:50:43

尝试使用CSS属性 “自动换行”。

table td a 
{ 
    word-wrap: break-word; 
}

这是支持in all major browsers并应该解决您的问题。

您可以看到一个test case I created here。您不需要指定元素的宽度，它将无法工作（调整结果窗口的大小以便查看。）

来源

2012-03-26 07:42:43 Kyle

在您的例子中，'因为你使用了'p'这是块元素，除非另有风格width'不是必需的。问题是指表内的特定列。 – 2012-03-26 08:14:20

是的，你是对的。 http://jsfiddle.net/Kyle_Sevenoaks/B3mhq/1/ – Kyle 2012-03-26 08:30:03

请给我一些更多的方式，我已经更新了这篇文章。我会永远感谢你。投票起来 – buggy 2012-03-26 08:46:25

table td a { 
    // set a width 
    word-wrap: break-word 
}

'word-wrap'解决方案仅适用于支持CSS3的IE和浏览器。

最好的跨浏览器解决方案是使用脚本语言（javascript或其他）来定位长字符串，并将它们放置在定期的html实体中＃8203;这个实体很好地打破了长词，并适用于所有浏览器。

一个漂亮的正则表达式应该是：

"everyverylongword".replace(/([^\s-]{5})([^\s-]{5})/,"$1&shy;$2")

来源

2012-03-26 08:51:23 antonjs

尝试此操作。会让你知道结果。一旦我获得特权，我会投票给你。 – buggy 2012-03-26 09:00:35

表列没有文本换行

回答

相关问题