首頁 > 開發者 > CSS

CSS word-wrap 防止表格被撐開做法

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一。關於TD的noWrap屬性
☆提出問題：
<td width="28%" align="right" nowrap >
我設定nowrap和不設定nowrap效果都一樣。就是表格隨著文字自動伸展，為什嗎？

→回答問題：
TD元素noWrap屬性的行為與TD元素的width屬性有關。

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

樣本檔案，點擊運行按鈕，查看效果


HTML 程式碼
引用：  
-------------------------------------------------------------------- 

 代碼如下 複製代碼
<html> 
<head> 
<title>wrap 屬性研究</title> 
<meta http-equiv="Content-Type" content="text/html;; charset=gb2312"> 
</head> 
 
<body bgcolor="#FFFFFF" text="#000000"> 
<p> 測試字串：</p> 
<p>我終於明白，我其實有一條韌性十足的命，它遠比我想象中的那條命結實得多、耐磨的多……</p> 
<p>儲存格未設定 nowrap屬性的空表：</p> 
<table width="100" border="1" cellspacing="0" cellpadding="0"> 
<tr> 
<td> ;;</td> 
</tr> 
</table> 
<p> 加入測試字串：</p> 
<table width="100" border="1" cellspacing="0" cellpadding="0"> 
<tr>  
<td> 我終於明白，我其實有一條韌性十足的命，它遠比我想象中的那條命結實得多、耐磨的多……</td> 
</tr> 
</table> 
<p> 儲存格設定了nowrap屬性，未設定width屬性：</p> 
<table width="100" border="1" cellspacing="0" cellpadding="0"> 
<tr> 
<td nowrap> 我終於明白，我其實有一條韌性十足的命，它遠比我想象中的那條命結實得多、耐磨的多……</td> 
</tr> 
</table> 
<p> 儲存格設定了nowrap屬性，也設定了width屬性：</p> 
<table width="200" border="1" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="120" nowrap>我終於明白，我其實有一條韌性十足的命，它遠比我想象中的那條命結實得多、耐磨的多……</td> 
<td> ;;</td> 
</tr> 
</table> 
</body> 
</html>  

---------------------------------------------------------------------- 
----------------------------------------------------------------------
二。 table的寬度,儲存格內換行問題
1. 要想固定table的總的寬度和每列的寬度：
<TABLE id="Table1" style="TABLE-LAYOUT:fixed" border="1">
或在指令碼中：
this.style.tableLayout = fixed
2. 換行問題
<td>有個attribute 叫 NOWRAP，可以控制每個儲存格是否允許換行
<TD nowrap=true>
或者
this.noWrap = true
3. 截斷英文單詞強行回行

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

可以利用css中的word-break 風格來達到我們的目的：
<TABLE id="Table1" style="TABLE-LAYOUT:fixed;;word-break:break-all" border="1">
或在指令碼中：
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"強製表格不撐開，即達到效果。

效果示範：<!--代碼引自aoyun.topcool.net/index.html-->


HTML 程式碼
引用：   
 

 代碼如下 複製代碼

 
-------------------------------------------------------------------------------- 
 
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=1 bordercolor="#A5C9CE"> 
<TBODY> 
<COLGROUP> 
<COL bgColor=#ffffff align=middle width=104> 
<COL class=text105 bgColor=#ffffff width=* nowrap> 
<COL class=text9 bgColor=#f7fcff align=middle width="14%"> 
<COL class=ef bgColor=#ffffff align=middle width=18% nowrap> 
<COL align=middle width=10% nowrap>  
<TBODY> 
<TR class="row1" align=middle bgColor=#49a7db height=20>  
<TD><NOBR></NOBR></TD> 
<TD><font color="#004d69"><b>主題</b>< /font></TD> 
<TD><font color="#004d69"><b>主題數|回複數</b>< /font></TD> 
<TD><font color="#004d69"><b>最後發表主題</b>< /font></TD> 
<TD><font color="#004d69"><b><NOBR> 版 主</NOBR></b></font></TD> 
</TR> 
<TR>  
<TD class="row1"><img src="forumData/logo/logo112.gif"></TD> 
<TD valign="middle" class="row2" onmouseover="javascript:this.style.backgroundColor='#E9F4F7';;" onmouseout="javascript:this.style.backgroundColor='#f4f4f4';;" > 
<table width="100%" style="TABLE-LAYOUT: fixed;; WORD-BREAK: break-all;;border-collapse: collapse"> 
<tbody> 
<tr>  
<td nowrap><b><a title="雅典賽事競猜" href="ShowForumThreadTree.do?m=1&forumID=112"> 『 雅典賽事競猜 』</a></b> 
</td> 
<td nowrap> 享受奧運精彩，參與奧運競猜，為中國健兒加油，更有大獎等你拿！別在門外徘徊，趕快進來！ </td> 
</tr> 
</tbody> 
</table> 
</TD> 
<TD noWrap class="row1">54/<font color="#FF3300">1153</font></TD> 
<TD nowrap class="row2"> 
<table cellspacing="3" style="TABLE-LAYOUT: fixed;; WORD-BREAK: break-all;;border-collapse: collapse"> 
<tr> 
<td height="2"></td> 
</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><td height="2"></td> 
</tr> 
</table></TD> 
<TD nowrap class="row2"><a title="奧運之星" target="_blank" href="usr_info.jsp?userName=奧運之星" >奧運之星</a> 
</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;">  

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More