关于连续长文字自动换行

最新推荐文章于 2022-05-31 16:54:21 发布

唐钰小球

最新推荐文章于 2022-05-31 16:54:21 发布

阅读量336

点赞数

分类专栏：网页设计文章标签： IE JavaScript Firefox CSS 浏览器 ViewUI

本文链接：https://blog.csdn.net/hanxin0311/article/details/83300812

版权

网页设计专栏收录该内容

19 篇文章 0 订阅

订阅专栏

关于连续长文字自动换行这个问题挺令人头痛的，IE还好，火狐就麻烦了。

下面介绍一下CSS控制连续长文字自动换行的方法：
IE：

div   { word-wrap:break-word;  word-break:break-all;}

FireFox: /* 这句是针对火狐，上面两句在火狐下不能用，只好溢出时隐藏 */

div   { word-wrap:break-word;  word-break:break-all;overflow:hidden;}

若要火狐下换行，可用Javascript实现，例如：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
/*<![CDATA[*/
div {
 width:300px;
 word-wrap:break-word;
 border:1px solid red;
 }
/*]]>*/
</style>
</head>
<body>
<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>
</body>
</html>

JavaScript虽然可以实现连续长文字自动换行，但‘连续长文字’的出现只是特别情况，但如果正常情况呢？

所以我编写了一个自定义标签（参见‘[url]http://hanxin830311.iteye.com/blog/208752[/url]’），无论什么浏览器都可以用，也解决了上面的问题，基本还算好用吧。