最近在使用datagrid的时候,表格内的字符常常把表格格式变的很乱,常常因为一个格子里面的字符多了,把整个格子变乱完
目前的解决办法是
protected void Page_Load(object sender, EventArgs e)
{
增加----this.SDG_ChangeWork.Attributes.Add("style", "word-break:break-all;word-wrap:break-word");
}
自动换行word-break:break-all和word-wrap:break-word的区别
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。
它们的区别就在于：
1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。
如果不增加js可以参考如下：
在其它浏览器中要实现文字自动强制折行功能，代码如下。http://www.blooberry.com/indexdot/css/properties/text/whitespace.htm
http://myy.helia.fi/~karte/pre-wrap-css3-mozilla-opera-ie.html
pre{
white-space: pre; /* CSS2 */
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-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}
word-wrap和white-space都可以控制，但对IE5就不起作用了。
在IE5下面控制元素折行应该使用这个 word-break : normal | break-all | keep-all
<br>
<br>
强制不折行
对于table来讲，给td增加nowrap就行。xhtml写法是nowrap="nowrap";
用style="white-space:nowrap;"同样可以强制不折行。或者用<nobr>来包括不允许折行的内容。<hr>
<div style="width:200px；height:50px;white-space:nowrap;">
强制不折行强 制fasdf不折 行强制不折行强制fasf不 折行强制 不折行fasfsa强制不折行
</div>
<hr>
<br>
<div style="width:200px；height:50px;">
<nobr>
强制不 折行fasd强制 不折行强制不fasdf折行强制不折行 强制不折行fasdf强制不折行
</nobr>
</div>
<br><br><hr>
<br>
有样式控制
fadsfdasfdasdgaggagadgagagagfadsfdasfdasdgaggagadgagagag 中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
有样式控制word-break:break-all
fadsfdasfdasdgaggagadgagagagfadsfdasfdasdgaggagadgagagag 中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
有样式控制word-break:break-all;word-wrap:break-word
fadsfdasfdasdgaggagadgagagagfadsfdasfdasdgaggagadgagagag 中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
有样式控制word-break:break-all;word-wrap:break-word
fadsfdasfdasdgaggagadgagagagfadsfdasfdasdgaggagadgagagag 中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
给table加样式 style="table-layout:fixed;width:300px;color:red;background-color:#cecece;word-break:break-all;word-wrap:break-word"
fadsfdasfdasdgaggagadgagagagfadsfdasfdasdgaggagadgagagag 中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
给td加样式 style="table-layout:fixed;width:300px;color:red;background-color:#cecece;word-break:break-all;word-wrap:break-word"
fadsfdasfdasdgaggagadgagagagfadsfdasfdasdgaggagadgagagag 中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
转载：http://blog.csdn.net/xworld99/archive/2005/11/23/535884.aspx
css之自动换行
大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！
对于div
1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。
#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}
<div id="wrap">ddd1111111111111111111111111111111111</div>
效果：可以实现换行
2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！
#wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }
<div id="wrap">ddd1111111111111111111111111111111111111111</div>
效果：容器正常，内容隐藏
对于table
1. (IE浏览器)使用样式table-layout:fixed；
<style>
.tb{table-layout:fixed}
</style>
<table class="tbl" width="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：可以换行
2.(IE浏览器)使用样式table-layout:fixed与nowrap
<style>
.tb {table-layout:fixed}
</style>
<table class="tb" width="80">
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：可以换行
3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
<style>
.tb{table-layout:fixed}
</style>
<table class="tb" width=80>
<tr>
<td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：两个td均正常换行
3.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
<style>
.tb {table-layout:fixed}
.td {overflow:hidden;}
</style>
<table class=tb width=80>
<tr>
<td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table>
这里单元格宽度一定要用百分比定义
效果：正常显示，但不能换行（注：在FF下还没有能使容器内容换行的好方法，只能用overflow将多出的内容隐藏，以免影响整体效果）
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。