﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-向左走向右走-随笔分类-css</title><link>http://www.blogjava.net/midstr/category/30861.html</link><description>人生總有許多的意外, 
握在手裡的風箏也會... 
突然斷了線——人生總有許多的巧合，
兩條平行綫也可能會...
有交滙的一天</description><language>zh-cn</language><lastBuildDate>Thu, 17 Apr 2008 03:00:26 GMT</lastBuildDate><pubDate>Thu, 17 Apr 2008 03:00:26 GMT</pubDate><ttl>60</ttl><item><title>自动换行的实现方法zz</title><link>http://www.blogjava.net/midstr/archive/2008/04/17/193659.html</link><dc:creator>向左走向右走</dc:creator><author>向左走向右走</author><pubDate>Thu, 17 Apr 2008 02:28:00 GMT</pubDate><guid>http://www.blogjava.net/midstr/archive/2008/04/17/193659.html</guid><wfw:comment>http://www.blogjava.net/midstr/comments/193659.html</wfw:comment><comments>http://www.blogjava.net/midstr/archive/2008/04/17/193659.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/midstr/comments/commentRss/193659.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/midstr/services/trackbacks/193659.html</trackback:ping><description><![CDATA[<div class="textbox-title">
<h4>自动换行的实现方法</h4>
<div class="textbox-label">[ 2006-02-24 22:42:39 pm | 作者: <a href="http://bijia.anyflex.cn/user.asp?act=view&amp;id=2">Bijia</a> ] </div>
</div>
<div class="textbox-fontsize">字体大小: <a href="javascript:setFontSize(14)" alt="字体大小: 大">大</a> | <a href="javascript:setFontSize(11)" alt="字体大小: 中">中</a> | <a href="javascript:setFontSize(9)" alt="字体大小: 小">小</a> </div>
<div class="textbox-content" id="textboxContent">1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。<br />
<br />
#wrap{white-space:normal; width:200px; }<br />
或者<br />
#wrap{word-break:break-all;width:200px;}<br />
<br />
eg.<br />
&lt;div id="wrap"&gt;ddd1111111111111111111111111111111111&lt;/div&gt;<br />
<br />
效果：可以实现换行<br />
2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！<br />
<br />
#wrap{white-space:normal; width:200px; overflow:auto;}<br />
或者<br />
#wrap{word-break:break-all;width:200px; overflow:auto; }<br />
<br />
eg.<br />
<br />
&lt;div id="wrap"&gt;ddd1111111111111111111111111111111111111111&lt;/div&gt;<br />
<br />
效果：容器正常，内容隐藏<br />
对于table<br />
<br />
1. (IE浏览器)使用样式table-layout:fixed；<br />
eg.<br />
<br />
&lt;style&gt;<br />
.tb{table-layout:fixed}<br />
&lt;/style&gt;<br />
<br />
&lt;table class="tbl" width="80"&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;abcdefghigklmnopqrstuvwxyz 1234567890<br />
&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;<br />
<br />
效果：可以换行<br />
2.(IE浏览器)使用样式table-layout:fixed与nowrap<br />
eg.<br />
<br />
&lt;style&gt;<br />
.tb {table-layout:fixed}<br />
&lt;/style&gt;<br />
<br />
&lt;table class="tb" width="80"&gt;<br />
&lt;tr&gt;<br />
&lt;td nowrap&gt;abcdefghigklmnopqrstuvwxyz 1234567890<br />
&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;<br />
<br />
效果：可以换行<br />
3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap<br />
<br />
&lt;style&gt;<br />
.tb{table-layout:fixed}<br />
&lt;/style&gt;<br />
<br />
&lt;table class="tb" width=80&gt;<br />
&lt;tr&gt;<br />
&lt;td width=25% nowrap&gt;abcdefghigklmnopqrstuvwxyz 1234567890<br />
&lt;/td&gt;<br />
&lt;td nowrap&gt;abcdefghigklmnopqrstuvwxyz 1234567890<br />
&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;<br />
<br />
效果：两个td均正常换行<br />
3.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div<br />
eg.<br />
<br />
&lt;style&gt;<br />
.tb {table-layout:fixed}<br />
.td {overflow:hidden;}<br />
&lt;/style&gt;<br />
<br />
&lt;table class=tb width=80&gt;<br />
&lt;tr&gt;<br />
&lt;td width=25% class=td nowrap&gt;<br />
&lt;div&gt;abcdefghigklmnopqrstuvwxyz 1234567890&lt;/div&gt;<br />
&lt;/td&gt;<br />
&lt;td class=td nowrap&gt;<br />
&lt;div&gt;abcdefghigklmnopqrstuvwxyz 1234567890&lt;/div&gt;<br />
&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;<br />
<br />
这里单元格宽度一定要用百分比定义<br />
效果：正常显示，但不能换行（注：在FF下还没有能使容器内容换行的好方法，只能用overflow将多出的内容隐藏，以免影响整体效果） <script type="text/javascript"><!-- google_ad_client="pub-0735278824539284" ; google_ad_width="336;
google_ad_height" = 280; google_ad_format="336x280_as" ; google_ad_type="text_image" ;
//2007-03-31: Blog google_ad_channel="1866782038" ; google_color_border="F3F9FD" ; google_color_bg="F3F9FD" ; google_color_link="000000" ; google_color_text="000000" ; google_color_url="000000" ;
//-->
</script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script></div>
<img src ="http://www.blogjava.net/midstr/aggbug/193659.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/midstr/" target="_blank">向左走向右走</a> 2008-04-17 10:28 <a href="http://www.blogjava.net/midstr/archive/2008/04/17/193659.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>