javascript - 表格列未换行文本

Question

Screenshot

重要提示:此应用程序不支持 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 代码，以便我使用来自后端的任何值来维护表的结构。

更新:

得到答案后，我更新了我的表格代码如下(正如他们所说的指定 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>

我知道我需要接受并投票选出有用的答案，做。但是请帮助我。我无法向您发送实时 URL。很快附上屏幕截图。

Screenshot

Answer 1

word-wrap 可以工作，但您需要为列指定一个 width。