表列沒有文本換行

重要提示：此應用程序不支持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

表列沒有文本換行

回答

相關問題