標籤

4GL (1) 人才發展 (10) 人物 (3) 太陽能 (4) 心理 (3) 心靈 (10) 文學 (31) 生活常識 (14) 光學 (1) 名句 (10) 即時通訊軟體 (2) 奇狐 (2) 音樂 (2) 產業 (5) 郭語錄 (3) 無聊 (3) 統計 (4) 新聞 (1) 經濟學 (1) 經營管理 (42) 解析度 (1) 遊戲 (5) 電學 (1) 網管 (10) 廣告 (1) 數學 (1) 機率 (1) 雜趣 (1) 證券 (4) 證券期貨 (1) ABAP (15) AD (1) agentflow (4) AJAX (1) Android (1) AnyChart (1) Apache (14) BASIS (4) BDL (1) C# (1) Church (1) CIE (1) CO (38) Converter (1) cron (1) CSS (23) DMS (1) DVD (1) Eclipse (1) English (1) excel (5) Exchange (4) Failover (1) FI (57) File Transfer (1) Firefox (2) FM (2) fourjs (1) gladiatus (1) google (1) Google Maps API (2) grep (1) Grub (1) HR (2) html (23) HTS (8) IE (1) IE 8 (1) IIS (1) IMAP (3) Internet Explorer (1) java (3) JavaScript (22) jQuery (6) JSON (1) K3b (1) LED (3) Linux (112) Linux Mint (4) Load Balance (1) Microsoft (2) MIS (2) MM (51) MSSQL (1) MySQL (27) Network (1) NFS (1) Office (1) Oracle (125) Outlook (3) PDF (6) Perl (59) PHP (33) PL/SQL (1) PL/SQL Developer (1) PM (3) Postfix (2) postfwd (1) PostgreSQL (1) PP (50) python (1) QM (1) Red Hat (4) Reporting Service (28) ruby (11) SAP (234) scp (1) SD (16) sed (1) Selenium-WebDriver (5) shell (5) SQL (4) SQL server (8) SQuirreL SQL Client (1) SSH (2) SWOT (3) Symantec (2) T-SQL (7) Tera Term (2) tip (1) tiptop (22) Tomcat (6) Trouble Shooting (1) Tuning (5) Ubuntu (33) ufw (1) utf-8 (1) VIM (11) Virtual Machine (2) vnc (3) Web Service (2) wget (1) Windows (19) Windows (1) WM (6) youtube (1) yum (2)

2014年4月16日 星期三

td 属性 noWrap 防止折行、撑开(及其它文字换行问题)

http://blog.csdn.net/jackpk/article/details/5604776

我用为td中noWrap属性来防止td数据折行
<td class="text_left" noWrap="noWrap">${msg.cspName}&nbsp;</td>

解决问题期间查询了些网络资料,以备后用



本文解释了nowrap是什么意思,以及在td中nowrap的使用,并提供了一个详细的完整代码来具体演示教学。
nowrap是什么意思

HTML中td元素的nowrap属性表示禁止单元格中的文字自动换行。
但使用时要注意的是,td元素noWrap属性的行为与td元素的width属性有关。

td元素中nowrap属性的行为与td元素的width属性有关。如果未设置td宽度,则nowrap属性起作用的,如果设置了td宽度,则nowrap属性不起作用。

nowrap详细解说
nowrap表示是否允许表格中的文本换行
nowrap=true的时候不能换行
nowrap=false可以换行

nowrap实例演示


<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>&nbsp;</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>&nbsp;</td>
</tr>
</table>
</body>
</html>
补存1
在css中控制强制换行或不换行的写法为:
语法:
white-space : normal | pre | nowrap |inherit
取值:
normal   : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre   : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象
nowrap   : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。参阅 noWrap 属性

补存2

网页设计排版的时候遇到了这样一个问题,就是我的网页是分块的,每块有不同的内容,今天发现,有块输入内容时,把别的块都撑的不成样子了,下面列出来的是我通过baidu检索的解决方案,现摘录到这里,方便以后查阅!
强制不换行
div{
white-space:nowrap;
}
自动换行
div{
word-wrap: break-word;
word-break: normal;
}
强制英文单词断行
div{
word-break:break-all;
}


CSS设置不转行:
overflow:hidden 隐藏
white-space:normal 默认
              pre 换行和其他空白字符都将受到保护
              nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象
设置强行换行:
word-break:
            normal: 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
            break-all:该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
            keep-all:与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

英文不换行
    CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有,在FF下测试,FF可以自己加滚动条,这样也不影响效果
建议大家做Skin时,记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题

说明:
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。
对应的脚本特性为wordBreak。
示例:
div {word-break : break-all; }

下面的是多浏览器支持CSS 容器内容超出(溢出)支持自动换行完美代码
<style type="text/css">
.linebr {
clear: both; /* 清除左右浮动 */
width: 100px; /* 必须定义宽度 */
word-break: break-word; /* 文本行的任意字内断开 */
word-wrap: break-word; /* IE */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
}





防止表格被撑开 CSS word-wrap

url:http://www.javaeye.com/topic/263249

运用到TD的noWrap属性,以及table的style="TABLE-LAYOUT: fixed;; WORD-BREAK: break-all;;border-collapse: collapse"代码配合
一。关于TD的noWrap属性
☆提出问题:
<td width="28%" align="right" nowrap >
我设置nowrap和不设置nowrap效果都一样。就是表格随着文字自动伸展,为什么?

→回答问题:
TD元素noWrap属性的行为与TD元素的width属性有关。

◆如果未设置TD宽度,则noWrap属性是起作用的。
◆如果设置了TD宽度,则noWrap属性是不起作用的。


示例文件,点击运行按钮,查看效果


Java代码 复制代码
  1. 引用:    
  2. --------------------------------------------------------------------   
  3. <html>   
  4. <head>   
  5. <title>wrap属性研究</title>   
  6. <meta http-equiv="Content-Type" content="text/html;; charset=gb2312">   
  7. </head>   
  8.   
  9. <body bgcolor="#FFFFFF" text="#000000">   
  10. <p>测试字符串:</p>   
  11. <p>我终于明白,我其实有一条韧性十足的命,它远比我想象中的那条命结实得多、耐磨的多……</p>   
  12. <p>单元格未设置nowrap属性的空表:</p>   
  13. <table width="100" border="1" cellspacing="0" cellpadding="0">   
  14. <tr>   
  15. <td> ;;</td>   
  16. </tr>   
  17. </table>   
  18. <p>加入测试字符串:</p>   
  19. <table width="100" border="1" cellspacing="0" cellpadding="0">   
  20. <tr>    
  21. <td>我终于明白,我其实有一条韧性十足的命,它远比我想象中的那条命结实得多、耐磨的多……</td>   
  22. </tr>   
  23. </table>   
  24. <p>单元格设置了nowrap属性,未设置width属性:</p>   
  25. <table width="100" border="1" cellspacing="0" cellpadding="0">   
  26. <tr>   
  27. <td nowrap>我终于明白,我其实有一条韧性十足的命,它远比我想象中的那条命结实得多、耐磨的多……</td>   
  28. </tr>   
  29. </table>   
  30. <p>单元格设置了nowrap属性,也设置了width属性:</p>   
  31. <table width="200" border="1" cellspacing="0" cellpadding="0">   
  32. <tr>   
  33. <td width="120" nowrap>我终于明白,我其实有一条韧性十足的命,它远比我想象中的那条命结实得多、耐磨的多……</td>   
  34. <td> ;;</td>   
  35. </tr>   
  36. </table>   
  37. </body>   
  38. </html>    
  39. ----------------------------------------------------------------------  

二。 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-->
Java代码 复制代码
  1. 引用:    
  2.   
  3.   
  4. --------------------------------------------------------------------------------   
  5.   
  6. <TABLE cellSpacing=0 cellPadding=0 width="100%" border=1 bordercolor="#A5C9CE">   
  7. <TBODY>   
  8. <COLGROUP>   
  9. <COL bgColor=#ffffff align=middle width=104>   
  10. <COL class=text105 bgColor=#ffffff width=* nowrap>   
  11. <COL class=text9 bgColor=#f7fcff align=middle width="14%">   
  12. <COL class=ef bgColor=#ffffff align=middle width=18% nowrap>   
  13. <COL align=middle width=10% nowrap>    
  14. <TBODY>   
  15. <TR class="row1" align=middle bgColor=#49a7db height=20>    
  16. <TD><NOBR></NOBR></TD>   
  17. <TD><font color="#004d69"><b>主题</b></font></TD>   
  18. <TD><font color="#004d69"><b>主题数|回复数</b></font></TD>   
  19. <TD><font color="#004d69"><b>最后发表主题</b></font></TD>   
  20. <TD><font color="#004d69"><b><NOBR>版 主</NOBR></b></font></TD>   
  21. </TR>   
  22. <TR>    
  23. <TD class="row1"><img src="forumData/logo/logo112.gif"></TD>   
  24. <TD valign="middle" class="row2" onmouseover="javascript:this.style.backgroundColor='#E9F4F7';;" onmouseout="javascript:this.style.backgroundColor='#f4f4f4';;" >   
  25. <table width="100%" style="TABLE-LAYOUT: fixed;; WORD-BREAK: break-all;;border-collapse: collapse">   
  26. <tbody>   
  27. <tr>    
  28. <td nowrap><b><a title="雅典赛事竞猜" href="ShowForumThreadTree.do?m=1&forumID=112">『 雅典赛事竞猜 』</a></b>   
  29. </td>   
  30. <td nowrap>享受奥运精彩,参与奥运竞猜,为中国健儿加油,更有大奖等你拿!别在门外徘徊,赶快进来! </td>   
  31. </tr>   
  32. </tbody>   
  33. </table>   
  34. </TD>   
  35. <TD noWrap class="row1">54/<font color="#FF3300">1153</font></TD>   
  36. <TD nowrap class="row2">   
  37. <table cellspacing="3" style="TABLE-LAYOUT: fixed;; WORD-BREAK: break-all;;border-collapse: collapse">   
  38. <tr>   
  39. <td height="2"></td>   
  40. </tr>   
  41. <tr>   
  42. <td align="center" nowrap><a title="热爱奥运 关心s中国的进来 不爱过的就别进来了" href="ShowThreadMessage.do?m=1&threadID=5087&forumID=112&threadPage=1">热爱奥运 关心s中国的进来 不爱过的就别进来了</a>   
  43. 2004-08-23 14:22    
  44. <a title="woaiaoyun1" target="_blank" href="usr_info.jsp?userName=woaiaoyun1">woaiaoyun1</a></td>   
  45. </tr>   
  46. <tr><td height="2"></td>   
  47. </tr>   
  48. </table></TD>   
  49. <TD nowrap class="row2"><a title="奥运之星" target="_blank" href="usr_info.jsp?userName=奥运之星" >奥运之星</a>   
  50. </TD>   
  51. </TR>   
  52. </TBODY>   
  53. </TABLE>   
  54. </td>   
  55. </tr>   
  56. </table>   
  57.   
  58.   
  59. html防止表格被撑开的css方法   
  60. table {    
  61. table-layout: fixed;   
  62. word-wrap:break-word;   
  63. }   
  64. div {    
  65. word-wrap:break-word;   
  66. }   
  67.   
  68. 要不在表格里加style="word-break:break-all;"  
  69.   
  70. 如:<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" style="word-break:break-all;">   

沒有留言:

張貼留言