防止文字撐開表格，強制表格大小

本文轉載自查看原文 2013-01-27 16:56 3510 div+css前端

數據自動換行不撐開寬度【全字母、數字、漢字，混合等】 out.println("<table align='center' width='800' border='0' style='table-layout:fixed; word-break:break-all; word-wrap:break-word' class='table_list1' cellpadding='0' cellspacing='0' id='plan_list'>");td設置非百分比大小（可以測試不設置效果）

數據不換行多於內容自動隱藏【隱藏的內容可以通過當鼠標移動到省略的文字上tr變高，title提示】

<table width="800" border="1" cellspacing="0" cellpadding="0" style="table-layout:fixed">
<tr>
<td nowrap="nowrap" style="overflow:hidden; text-overflow:ellipsis;">1111111111111111111111111111111111111111111111111111111111111111111111111111111</td>
<td nowrap="nowrap" style="overflow:hidden; text-overflow:ellipsis;">發生時收拾收拾收拾收拾收拾收拾收拾收拾收拾收拾收拾收拾收拾收拾收拾收拾收拾收拾收拾收拾收拾收拾</td>

以下內容為轉載

運用到TD的noWrap屬性，以及table的style="TABLE-LAYOUT: fixed;; WORD-BREAK: break-all;;border-collapse: collapse"代碼配合

一。關於TD的noWrap屬性

☆提出問題：

我設置nowrap和不設置nowrap效果都一樣。就是表格隨着文字自動伸展，為什么？

→回答問題：

TD元素noWrap屬性的行為與TD元素的width屬性有關。

◆如果未設置TD寬度，則noWrap屬性是起作用的。

◆如果設置了TD寬度，則noWrap屬性是不起作用的。

示例文件，點擊運行按鈕，查看效果：

引用：

<html>

<head>

<title>wrap屬性研究</title>

</head>

<p>測試字符串：</p>

<p>我終於明白，我其實有一條韌性十足的命，它遠比我想象中的那條命結實得多、耐磨的多……</p>

<p>單元格未設置nowrap屬性的空表：</p>

<tr>

</tr>

</table>

<p>加入測試字符串：</p>

<tr>

<td>我終於明白，我其實有一條韌性十足的命，它遠比我想象中的那條命結實得多、耐磨的多……</td>

</tr>

</table>

<p>單元格設置了nowrap屬性，未設置width屬性：</p>

<tr>

<td nowrap>我終於明白，我其實有一條韌性十足的命，它遠比我想象中的那條命結實得多、耐磨的多……</td>

</tr>

</table>

<p>單元格設置了nowrap屬性，也設置了width屬性：</p>

<tr>

<td width="120" nowrap>我終於明白，我其實有一條韌性十足的命，它遠比我想象中的那條命結實得多、耐磨的多……</td>

</tr>

</table>

</body>

</html>

二。 table的寬度,單元格內換行問題

1. 要想固定table的總的寬度和每列的寬度：

或在腳本中：

this.style.tableLayout = fixed

2. 換行問題

<td>有個attribute 叫 NOWRAP，可以控制每個單元格是否允許換行

或者

this.noWrap = true

3. 截斷英文單詞強行回行

上面兩個方法可以把表格的寬度都固定了，每個單元是否允許回行都可以設定了，現在可能又會碰到一個問題，當允許回行的遇到比較長的英文單詞，可能就超出了這個單元格的寬度，要是不把這個單詞從中截斷強行換行的話，這個單詞的超出單元格寬的的部分將不被顯示出來。所以需要在單詞超出單元格長度的地方把單詞強行截斷回行。

可以利用css中的word-break 風格來達到我們的目的：

或在腳本中：

this.style. wordBreak = break-all

String設置或獲取一個下面的值：

normal

缺省值. 允許從每個詞處回行。

break-all

不管在什么位置，超過列寬時就回行。

keep-all

不允許 Chinese, Japanese, 和 Korean 回行。這個功能類似與“normal” 的非亞洲語言版本。

總結，先用noWrap強行令文字不換行，再用style="TABLE-LAYOUT: fixed;; WORD-BREAK: break-all;;border-collapse: collapse"強制表格不撐開，即達到效果。

效果演示：

引用：

<TBODY>

<TBODY>

<TD><font color="#004d69"><b>最后發表主題</b></font></TD>

</TR>

<TR>

<tbody>

<tr>

<td nowrap><b><a title="雅典賽事競猜" href="ShowForumThreadTree.do?m=1&forumID=112">『雅典賽事競猜』</a></b>

</td>

<td nowrap>享受奧運精彩，參與奧運競猜，為中國健兒加油，更有大獎等你拿！別在門外徘徊，趕快進來！ </td>

</tr>

</tbody>

</table>

</TD>

<tr>

</tr>

<tr>

<td align="center" nowrap><a title="熱愛奧運關心s中國的進來不愛過的就別進來了" href="ShowThreadMessage.do?m=1&threadID=5087&forumID=112&threadPage=1">熱愛奧運關心s中國的進來不愛過的就別進來了</a>

2004-08-23 14:22

<a title="woaiaoyun1" target="_blank" href="usr_info.jsp?userName=woaiaoyun1">woaiaoyun1</a></td>

</tr>

</tr>

</table></TD>

</TD>

</TR>

</TBODY>

</TABLE>

</td>

</tr>

</table>

html防止表格被撐開的css方法

table {

table-layout: fixed;

word-wrap:break-word;

}

div {

word-wrap:break-word;

}

要不在表格里加style="word-break:break-all;"

如：<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" style="word-break:break-all;">

嘻嘻搞定！！！YEAL~!

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CAD插入表格后如何設置表格文字大小？ python繪制表格表格或div被撐開的解決辦法 div 怎么由文字撐開（應用於簡易聊天）固定div寬度，將內部文字按照div的寬度左右撐開 [發布] Photoshop 繪制表格濾鏡（DrawTable） js控制表格隔行變色標簽文字強制不換行 css文字強制大寫輸入 C# 使用PrintDocument 繪制表格完成打印預覽