网页内强制折行与不折行的解决方案（ZZ）

最新推荐文章于 2024-11-27 11:58:54 发布

转载最新推荐文章于 2024-11-27 11:58:54 发布 · 8.7k 阅读

文章标签：

#firefox #border #浏览器 #class #table #javascript

ASP.NET学习笔记专栏收录该内容

51 篇文章

订阅专栏

本文介绍了在网页开发中处理文本折行的各种方法，包括使用不同的CSS属性如word-break、word-wrap以及white-space等来实现文本的自动折行或强制不折行。同时，还提供了针对不同浏览器兼容性的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

来自：http://hi.baidu.com/cowskin/blog/item/c1b303f3d91d00c80b46e0fc.html

网页开发过程中时常会遇到关于折行和不折行的问题。
比如连续英文或符号时，即使定义了宽度，文本还是没法折行，因为没有字符、字母里间隔的话，会当成一个单词。所以按不能折行来解析。
这时如果遇到了链接url，往往全是连续的英文和字母，这样就会把原本做好的页面搅乱。
而有的时候，我们希望强制不折行，或者某一链接不折行，或者折行时链接一起折行，而不会出现链接里两个字有断开的折行。

首先做个需要折行的效果，如果遇到连续的英文字母符号时，当窗口缩小时看下是否折行。
<br>
<hr>
什么也不加，不折行
<div style="width:200px；height:50px">
http://jiarry.126.com/http://jiarry.blogchina.com/http://hi.baidu.com/jarry/http://jarryli.googlepages.com/http://jiarry.blogspot.com/
</div>
<br>
<hr>
加上 word-break:break-all;word-wrap:break-word;在IE下缩小窗口时候折行，但firefox不折行.
<div style="width:200px；height:50px;w ord-break:break-all;word-wrap:break-word;">
http://jiarry.126.com/http://jiarry.blogchina.com/http://hi.baidu.com/jarry/http://jarryli.googlepages.com/http://jiarry.blogspot.com/
</div>
<br>
<hr>
加上 word-break:break-all;word-wrap:break-word;overflow:hidden;在IE下缩小窗口时候折行，但firefox不折行.
<div style="width:200px;height:50px; word-break:break-all;word-wrap:break-word;overflow:hidden;">
http://jiarry.126.com/http://jiarry.blogchina.com/http://hi.baidu.com/jarry/http://jarryli.googlepages.com/http://jiarry.blogspot.com/
</div>

<hr>
若firefox下也要把英文url强制折行，需要增加js
如下：
<pre>
<script language="javascript" type="text/javascript" defer="defer">
javascript:( function() {var D=document; F(D.body); function F(n){var u,r,c,x; if(n.nodeType==3){ u=n.data.search(//S{10}/); if(u>=0) { r=n.splitText(u+10); n.parentNode.insertBefore(D.createElement("WBR"),r); } }else if(n.tagName!="STYLE" && n.tagName!="SCRIPT"){for (c=0;x=n.childNodes[c];++c){F(x);}} } })();
</script>
</pre>

如果不增加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

有样式控制 word-break:break-all;word-wrap:break-word

给table加样式 style="table-layout:fixed;width:300px;color:red;background-color:#cecece;word-break:break-all;word-wrap:break-word"

给td加样式 style="table-layout:fixed;width:300px;color:red;background-color:#cecece;word-break:break-all;word-wrap:break-word"

转载：http://blog.csdn.net/xworld99/archive/2005/11/23/535884.aspx

css之自动换行

　如果想要一个table固定大小，里面的文字强制换行(尤其是在一长串英文文本，并且中间无空格分隔的情况下)，以达到使过长的文字不撑破表格的目的，一般是使用样式：table-layout:fixed。但是在Firefox下面，会有一些问题，参考Gmail的一些做法，做了几个测试，得出一种解决办法。

例1：(IE浏览器)普通的情况

<table border=1 width=80>

     <tr>

       <td>abcdefghigklmnopqrstuvwxyz 1234567890

       </td>

     </tr>

</table>

效果：
可以看到width=80并没有起作用，表格被字符撑开了。

例2：(IE浏览器)使用样式table-layout:fixed

<style>

.tbl {table-layout:fixed}

</style>



<table class=tbl border=1 width=80>

     <tr>

       <td>abcdefghigklmnopqrstuvwxyz 1234567890

       </td>

     </tr>

</table>

效果：
width=80起作用了，但是表格换行了。

例3：(IE浏览器)使用样式table-layout:fixed与nowrap

<style>

.tbl {table-layout:fixed}

</style>



<table class=tbl border=1 width=80>

     <tr>

       <td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

       </td>

     </tr>

</table>

效果：
width=80起作用了，换行也被干掉了。

例4：(IE浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap

<style>

.tbl {table-layout:fixed}

</style>



<table class=tbl border=1 width=80>

     <tr>

       <td width=20 nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

       </td>

       <td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

       </td>

     </tr>

</table>

效果：
不幸发生了，第一个td的nowrap不起作用了

例5：(IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap

<style>

.tbl {table-layout:fixed}

</style>



<table class=tbl border=1 width=80>

     <tr>

       <td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

       </td>

       <td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

       </td>

     </tr>

</table>

效果：
改成百分比，终于搞定了

例6：(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap效果：
把例5放到firefox下面，又ft了

例7：(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div

<style>

.tbl {table-layout:fixed}

.td {overflow:hidden;}

</style>



<table class=tbl border=1 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>

效果：
天下终于太平了

例8：(Firefox浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div

<style>

.tbl {table-layout:fixed}

.td {overflow:hidden;}

</style>



<table class=tbl border=1 width=80>

     <tr>

       <td width=20 class=td nowrap>

         <div>abcdefghigklmnopqrstuvwxyz 1234567890</div>

       </td>

       <td class=td nowrap>

         <div>abcdefghigklmnopqrstuvwxyz 1234567890</div>

       </td>

     </tr>

</table>

效果：
nowrap又不起作用了