DIV里的文字会不受控制地换行,是为什么呢?

coldestice 2008-02-18 10:26:31
有如下一段代码,一个大的DIV宽度为1000,套了两个小DIV,宽度分别为800和200,尺寸刚好。
但是右侧宽度为200的DIV中的字会换行。
如果把右侧DIV的宽度设置为197,则不会再换行。
请高手教导:怎样避免前面的自动换行情况?
谢谢!

页面代码如下:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.leftlady.com</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color:#666666;
background:#fff;
text-align:center;

}

* {
margin:0;
padding:0;
}


.clear {
clear:both;
}

#mainBox{
margin-top:220px;
width:1000px;
height:200px;
background:#cccccc;
color:#FFFFFF;
}

#leftbox{
float:left;
width:800px;
height:200px;
background:#987654;
}

#rightbox{
float:left;
width:200px;
height:200px;
background:#123456;
clear:right;
}
-->
</style>
</head>

<body>
<div id="mainBox">
<div id="leftbox">wqe</div>
<!-- <div class="clear"></div> -->
<div id="rightbox">sadf</div>
</div>
</body>
</html>
...全文
4118 39 打赏 收藏 转发到动态 举报
写回复
用AI写文章
39 条回复
切换为时间正序
请发表友善的回复…
发表回复
jinlaishi 2012-09-06
  • 打赏
  • 举报
回复
看看
未来
看答案
tuxin09302010016 2011-04-10
  • 打赏
  • 举报
回复
我也遇到这个问题
路遠 2010-11-27
  • 打赏
  • 举报
回复
我也碰到这样的问题,谢谢!!1
快乐聪仔 2010-04-06
  • 打赏
  • 举报
回复
。晕。。我遇到这个问题。。没看到答案。。。
零度空间0520 2010-03-24
  • 打赏
  • 举报
回复
这个问题有点难啊,,
coldestice 2008-02-19
  • 打赏
  • 举报
回复
刚才重新学习了一下这篇http://bbs.blueidea.com/thread-2692486-1-1.html
研究得真是太经典太透彻了!
这下子这个问题已经彻底不再让我烦恼了,感谢以下各位大哥的指导,谢谢!
cloudgamer 2008-02-19
  • 打赏
  • 举报
回复
查了查书
原来是ie6重复字符bug
精通css的159页有详细解释

cloudgamer 2008-02-19
  • 打赏
  • 举报
回复
学习了
厉害
  • 打赏
  • 举报
回复
<!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">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</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>
是js控制英文换行的!
  • 打赏
  • 举报
回复
关于word-wrap和word-break的区别

word-wrap是控制换行的。
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。

break-word是控制是否断词的。
normal是默认情况,英文单词不被拆开。
break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。
keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)


用word-wrap:break-word; overflow:hidden;在 IE 下没有任何问题,在 FF 下,长串英文会被遮住超出的内容。
目前对于firefox浏览器来说,如果是英文字符还没找到有效的自动换行方法,只有通过JS代码解决
  • 打赏
  • 举报
回复
word-break:break-all;
加上这个自动换行,这个在IE里有效,FF的话好象得换一个!
  • 打赏
  • 举报
回复
我这里没有你说的现象,
只有当我输入sadfdadadasdadadasdasdaddaddadd这么多他才会换行
只是第一行只有sadf
所以你要设置换行控制才可以
rczjp 2008-02-18
  • 打赏
  • 举报
回复
marging 和padding设置为0
coldestice 2008-02-18
  • 打赏
  • 举报
回复
谢谢楼上的大侠:)
不过这里面只放了4个字母,因此只有40多个像素,远远没有到200像素,因此您说的理由不成立哦:)
xxmhl 2008-02-18
  • 打赏
  • 举报
回复
因为那个DIV的宽度就是200,字的宽度大于DIV的宽度时自然会换行,如果不想让它换行,
那就给写字的DIV写个隐藏的样式.把字隐藏了.
coldestice 2008-02-18
  • 打赏
  • 举报
回复
听说是用多个并列的DIV从左向右排,会产生3个像素的空隙,从而引起换行,用clear可以解决。
不知道是不是真的:(
coldestice 2008-02-18
  • 打赏
  • 举报
回复
谢谢您的及时回复:)
CSS里如何设置呢?
在下面这段代码里,我尝试修改过clear属性的不同参数:right left both,但只要该DIV宽度是200,文字就会自动换行

#rightbox{
float:left;
width:200px;
height:200px;
background:#123456;
clear:right;
}
xiaojing7 2008-02-18
  • 打赏
  • 举报
回复
css里设置
coldestice 2008-02-18
  • 打赏
  • 举报
回复
Andy大哥!
谢谢你!!!!
你的答案是正解!!!!
将注释换个位置或者删除后显示正常!!!!!!!!!!!
我太爱你了!!终于找到问题所在了!
andy0502 2008-02-18
  • 打赏
  • 举报
回复

注释造成文字溢出吧,是IE6的BUG。

解决方法:

1、不放置注释。最简单、最快捷的解决方法,嘿嘿……
2、注释不要放置于2个浮动的区块之间。
3、将文字区块包含在新的<div></div>之间
4、去除文字区块的固定宽度,与3有相似之处

详细:http://bbs.blueidea.com/thread-2692486-1-1.html
加载更多回复(19)

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧