Question

重要说明：此应用程序不支持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>

我知道我需要接受并投票通过有用的答案。但请帮助我。我无法向您发送实时网址。很快就会拍摄屏幕截图。

Screenshot

Answer 1

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

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

这是受支持的in all major browsers，应该可以解决您的问题。

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

Answer 2

word-wrap可以使用，但您需要为该列指定width。

Answer 3

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

'自动换行'解决方案仅适用于支持CSS3的IE和浏览器。

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

一个很好的正则表达式应该是：

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

table-column不包装文本

3 个答案: