论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

CSS实例:如何让无空格的长字符在IE和FF下面实现自动换行?

文章类别:div+css布局 | 发表日期:2008-9-26 11:28:10

  无空格连续长字符在IE与FF下有时候能实现自动换行,因为浏览器将它看成是一个长单词了。IE下很简单,给容器比如一个p定义word-wrap属性即可:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
p {word-wrap:break-word;}

  对于firefox,至少现在用CSS是没有办法解决的,大多数是用overflow将撑出的部分隐藏或者加滚动条,因为word-wrap不是css2的标准属性,所以Mozilla不支持这个。既然CSS无法做到,那么只有使用JS的方法了。

  首先给这个容器p一个ID“#hh”,然后在页面中插入一段JS:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<script type=\"text/javascript\">
function toBreakWord(intLen){
var obj=document.getElementById(\"hh\");
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(40)
</script>

其中最后一句括号中的(40)是每行的字母的数目,不过它不能分辨每个词的长度,就是说英文单词会全部被截断,不管是不是连续的长字符,这不符合书写习惯也不利于阅读,但是这是偶找到比较好的解决办法。
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058