CSS word-wrap 防止表格被撑开做法

一。关于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;">  
时间: 2024-09-21 01:59:33

CSS word-wrap 防止表格被撑开做法的相关文章

word插入excel表格并自动更新方法

  如何在word中插入excel表格,并且表格要随着excel文件内容的跟新而更新,我今天简单测试了一下,很容易完成.现在说一下步骤: 在首先之前,插入一句看似没用,实际上又很重要的话:我的office版本是office2003. 首先,建立一个excel表格,里面随便输入一些内容.然后再新建一个word文档,在需要插入表格的地方,选择菜单:[插入(I)]-->[对象(O)...]-->出现对象对话框后,选择第二页[由文件创建(F)]-->[文件名(N)]的右边有[浏览(B)],你可以

防止表格被撑开或div层被撑开的多种方法

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 在我们设计网页的时候,总会遇到一些不愉快的事情,最常见的莫过于在后台添加内容后才发现显示的页面被撑开,导致网页极度不美观.以前大家基本上都是设计表格,网上自然不少对于的解决方法,如今还有div+css标准设计,很少看到相关好的方法,现在潇湘在线把平时找到的防止表格被撑开的好方法总结归纳一下,和大家一起分享. 一.直接在网页里设置图片大小,比如

前端-word wrap和word break为啥设计成一个属性?

问题描述 word wrap和word break为啥设计成一个属性? word-wrap: The word-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing bo

希望用java操作word,有表格,数据较多,还有一个嵌入的txt

问题描述 希望用java操作word,有表格,数据较多,还有一个嵌入的txt 希望用java操作word,有表格,数据较多,还有一个嵌入的txt,freemarker好像不可以..... 解决方案 用Apache POI ,可以直接通过java程序操作word文档 解决方案二: 用POI的网上可以搜到也能下载到.

word wrap 解惑

源起 我们经常需要"修复"一个老生常谈的"bug",那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作"word wrap",即文本处理器有能力把超出页边的整个词自动传到下一行. 在现实项目中,尤其是在测试阶段,鉴于测试使用非常极端的测试用例,我们经常需要"修复"如图所示的这个问题: 长单词溢出 图中,极长的这个英文单词(虽然是生造的)为了保证完整的显示,无奈地超出了容器的限制,它溢出了.为了"修复

Word实现Excel表格分栏打印的方法

  Word实现Excel表格分栏打印的方法           实际工作中,经常会遇到一些列数较少而行数很多的数据的Excel表格,如下图所示: 这些数据有两列253行,现在需要将这些数据打印出来. 先预览一下: 由于数据列数很少,内容都集中在纸张左侧了.显然,这样的打印效果会让BOSS疯掉的. 直接在Excel中排版的话,需要多次剪切.粘贴操作. 咱们可以利用Word,快速实现分栏打印.首先复制Excel中的数据,粘贴到Word中. 依次单击[页面布局][分栏],选择[两栏]. 这样就可以快

Word 2007自动调整表格文字大小

Word 2007自动调整表格文字大小 step1:选中目标单元格-右键-表格属性 step2:表格属性-选项 step3:单元格选项-适应文字

快速为Word 2003超长表格插入表头

快速为Word 2003超长表格插入表头 选择"文件-页面设置"命令,在"页边距"标签页中,分别设置上下左右的页边距.这一步是为了方便后文的行高设置. 右击Word 2003表格第一页左上角的全选标识,选择"表格属性".在"行"标签页中,勾选"指定高度"项,并将其改为"1.3.固定值"."确定"后即将其调整为每页18行. "绘制表格"按钮,按原表格

如何在Word里调整表格宽度?

  1.打开Word文档.点击工具栏的"插入"→"表格". 2.插入表格后,点击工具栏的"布局",接着点击"自动调整",里面有"根据内容自动调整表格"."根据窗口自动调整表格"以及"固定列宽"我们可以对Word里的表格进行操作选择. 3.选择完毕后我们就可以在文档里看到调整后的效果啦.