文本中的换行问题,解决方法.
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
取值:
说明:
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用 break-all 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 wordBreak 。
word-wrap版本:IE5.5+专有属性 继承性:有
语法:
word-wrap : normal | break-word
取值:
说明:
设置或检索当当前行超过指定容器的边界时是否断开转行。
此属性仅作用于有布局的对象,如块对象。内联要素要使用该属性,必须先设定对象的 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
如图:我在一个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
相关文章推荐
- asp.net 数据绑定 使用eval 时候报 字符文本中的字符太多 问题的解决方法
- ios pdf自动换行方法(解决中文乱码问题)
- 彻底解决android中Textview控件文本自动换行问题
- UTF-8文本文件头部出现乱码“锘*”的问题及解决方法
- ios ASTextNode中富文本多行中文显示问题解决方法
- oracle+jsp中blob类型存储大文本问题解决方法
- easyui在jsp页面的td文本过长时无法自动换行的解决方法
- android TextView多行文本(超过3行)使用ellipsize属性无效问题的解决方法
- firefox英文字符串不自动换行问题的解决方法
- win7调整文本字体像素大小的问题另类解决方法
- td中不包含汉字的字符串不换行,包含汉字的能换行的问题原因及解决方法
- android TextView多行文本(超过3行)使用ellipsize属性无效问题的解决方法
- android TextView多行文本(超过3行)使用ellipsize="end"属性无效问题的解决方法
- android TextView多行文本(超过3行)使用ellipsize属性无效问题的解决方法
- 用百度编辑器发布文章代码/英文字符无法自动换行问题解决方法
- 从数据库导出数据到EXCEL换行的问题解决方法
- Windows7 下 VirtualBox 安装文本模式 CentOS的若干问题解决方法
- 解决 水晶报表自动换行时文本被截问题
- excel表中多位位数字设置成文本后不能自动填充问题的解决方法
- android TextView多行文本(超过3行)使用ellipsize属性无效问题的解决方法