您的位置:首页 > 其它

文本中的换行问题,解决方法.

2007-04-22 17:46 435 查看
在网页中,一般都支持自动换行,但是如果是连续的数字和字母就不会自动换行,而是另起一行开始,

如图:我在一个100高,100宽的层里放置的字符串有数字,字母和中文......已经超出边界了.原因是浏览器是外国人做的,他们认为一个单词不能被换行隔开.........中文每个字就是一个word.




<div style="width:100px;height:100px;background:gray;">


你好打法d放大萨反放大萨反放大萨反范德萨放大萨反放大萨ddddddddddddddddd反7777777777777777777777777777777777777777777777777777


</div>

图片:



在网上看到用这个css属性,效果如下,换了个背景色,那个太深了.

word-wrap:break-word

用了之后,倒是 分开了,可是效果还不是很理想.



换个属性,就ok了是这个:word-break:break-all



看看详细解释:

word-break版本:IE5+专有属性 继承性:有

语法:
word-break : normal | break-all | keep-all
取值:

normal : 默认值。允许在词间换行
break-all : 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
说明:
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用 break-all
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 wordBreak

word-wrap版本:IE5.5+专有属性 继承性:有

语法:
word-wrap : normal | break-word
取值:
normal : 默认值。允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。如果需要,词内换行( word-break )也将发生
说明:
设置或检索当当前行超过指定容器的边界时是否断开转行。
此属性仅作用于有布局的对象,如块对象。内联要素要使用该属性,必须先设定对象的 height width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 wordWrap

如果是Firefox浏览器,要这么设置:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">...
<!--
div {...}{
width:300px;
word-wrap:break-word;
border:1px solid red;
}
-->
</style>

<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

<script type="text/javascript">...
// <![CDATA[

function toBreakWord(intLen)...{
var obj=document.getElementById("ff");
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen)...{
strTemp+=strContent.substr(0,intLen)+" ";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=" "+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord(37)
// ]]>
</script>

最后再推荐一篇文章

web标准常见问题集合

http://bbs.blueidea.com/thread-2692909-1-1.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐