网页开发过程中时常会遇到关于折行和不折行的问题。
比如连续英文或符号时,即使定义了宽度,文本还是没法折行,因为没有字符、字母里间隔的话,会当成一个单词。所以按不能折行来解析。
这时如果遇到了链接url,往往全是连续的英文和字母,这样就会把原本做好的页面搅乱。
而有的时候,我们希望强制不折行,或者某一链接不折行,或者折行时链接一起折行,而不会出现链接里两个字有断开的折行。
table-layout: fixed 按照你定义的表格宽度或列宽显示数据,不受内容本身宽度影响。
1.(IE支持)
关键词:table-layout: fixed 及 word-wrap: break-word
<table style="table-layout: fixed" width="200" bgcolor="#f7f7f7"> <tr> <td style="word-wrap: break-word"> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA </td> </tr> </table>2.(Firefox 或其他浏览器支持)
/* Browser specific (not valid) styles to make preformatted text wrap */
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}转自:http://myy.helia.fi/~karte/pre-wrap-css3-mozilla-opera-ie.html
3.(Firefox支持)
<td><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/); 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)} } })();</script></td>4.IE5以下
word-wrap和white-space都可以控制,但对IE5就不起作用了。
在IE5下面控制元素折行应该使用这个 word-break : normal | break-all | keep-all
本文探讨了网页开发中折行和链接处理的关键技术,包括使用table-layout: fixed和word-wrap: break-word来控制表格布局和文本折行,以及通过CSS样式和JavaScript脚本来实现特定的折行需求。特别关注于如何避免链接内部的折行问题,提供了适用于不同浏览器的解决方案。
4915

被折叠的 条评论
为什么被折叠?



