首页 新闻 论坛 群组 Blog 文档 下载 读书 Tag 网摘 搜索 .NET Java 游戏 视频 人才 外包 培训 数据库 书店 程序员
中国软件网
欢迎您:游客 | 登录 注册 帮助
    • DIV里的文字会不受控制地换行，是为什么呢？ [已结帖,结帖人:coldestice]
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • 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>
    20  修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • xiaojing7
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 10:28:361楼 得分:0
    css里设置
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • coldestice
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 10:34:542楼 得分:0
    谢谢您的及时回复：）
    CSS里如何设置呢？
    在下面这段代码里，我尝试修改过clear属性的不同参数:right left both，但只要该DIV宽度是200，文字就会自动换行

    #rightbox{
    float:left;
    width:200px;
    height:200px;
    background:#123456;
    clear:right;
    }
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • coldestice
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 10:36:543楼 得分:0
    听说是用多个并列的DIV从左向右排，会产生3个像素的空隙，从而引起换行，用clear可以解决。
    不知道是不是真的：（
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • xxmhl
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 10:44:354楼 得分:0
    因为那个DIV的宽度就是200,字的宽度大于DIV的宽度时自然会换行,如果不想让它换行,
    那就给写字的DIV写个隐藏的样式.把字隐藏了.
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • coldestice
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 11:00:525楼 得分:0
    谢谢楼上的大侠：）
    不过这里面只放了4个字母，因此只有40多个像素，远远没有到200像素，因此您说的理由不成立哦：）
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • rczjp
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 11:58:286楼 得分:0
    marging 和padding设置为0
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • chinmo
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：

    • 3

      9
    发表于：2008-02-18 12:42:107楼 得分:0
    我这里没有你说的现象，
    只有当我输入sadfdadadasdadadasdasdaddaddadd这么多他才会换行
    只是第一行只有sadf
    所以你要设置换行控制才可以
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • chinmo
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：

    • 3

      9
    发表于：2008-02-18 12:44:088楼 得分:0
    word-break:break-all;
    加上这个自动换行，这个在IE里有效，FF的话好象得换一个！
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • chinmo
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：

    • 3

      9
    发表于：2008-02-18 12:46:509楼 得分:0
    关于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代码解决
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • chinmo
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：

    • 3

      9
    发表于：2008-02-18 12:48:1210楼 得分:0
    <!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)+"&#10;"; 
    strContent=strContent.substr(intLen,strContent.length); 
    }
    strTemp+="&#10;"+strContent;
    obj.innerHTML=strTemp;
    }
    if(document.getElementById  &&  !document.all)  toBreakWord(37)
    // ]]>
    </script>
    </body>
    </html>
    是js控制英文换行的！
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • coldestice
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 14:00:5511楼 得分:0
    感谢以上各位大哥的指导，但和我说的不是一回事。

    这个帖子要说明的是：

    一个大的DIV（宽度100）里面放了左右两个小DIV（宽度分别为800和200）。小DIV的宽度之和等于大DIV的宽度，但是小DIV里面的东西会溢出换行（在IE6下测试，其它的还没测试过）。

    为了更加直观，我将这段代码修改了一下，请注意这一段：
    “ <div id="rightbox">右侧这行字的最后一个字会跑走 </div>”
    这一行里面的“走”字会溢出DIV，跑到DIV的下方，下方会重复显示一个“走”字。

    将代码拷贝到一个HTML页面源代码里，会看得更清楚。

    谢谢了：）


    <!--
    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;
    clear:right;
    }

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

    <body>
    <div id="mainBox">
    <div id="leftbox">这是左侧的位置 </div>
    <!-- <div class="clear"> </div>  -->
    <div id="rightbox">右侧这行字的最后一个字会跑走 </div>
    </div>
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • coldestice
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 14:02:2912楼 得分:0
    发表于：2008-02-18 10:44:354楼 得分:0
    因为那个DIV的宽度就是200,字的宽度大于DIV的宽度时自然会换行,如果不想让它换行,
    那就给写字的DIV写个隐藏的样式.把字隐藏了.

    加了"overflow:hidden"，但不解决问题。
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • xxmhl
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 14:25:0913楼 得分:0
    我已经将代码拷贝到一个HTML页面源代码里面了,在我这里没有出现问题,"右侧的字也没有跑走,"除非字多了,才会自动换行.


    你上面说加了"overflow:hidden"，但不解决问题。是因为先要给字定义一个宽度,还要定义
    一个不换行,然后再定义"overflow:hidden"，才会起作用.
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • chinmo
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：

    • 3

      9
    发表于：2008-02-18 14:28:0914楼 得分:0
    晕死，我测试了不会重复跑！
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • chinmo
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：

    • 3

      9
    发表于：2008-02-18 14:29:5115楼 得分:0
    你好好看我的说明
    因为我是拿你程序测试以后我才说的，在FF和IE下我都测试了！都不会换行后重复出现最后一个字！
    可能你电脑毛病！
    总之我测试了！一切就如我上面解释的！
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • coldestice
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 14:41:5016楼 得分:0
    那我觉得太奇怪了，我这边两台电脑测试都会跑掉：（
    那个“走”字会在上面显示，但也会在下面再显示一次。
    最终的显示结果是：

    ---------------|--------------------------
    |这是左侧的位置  | 右侧这行字的最后一个字会跑走 |
    |              |                        |
    |              |                          |
    ---------------|--------------------------
                            走

    我不知道是不是因为我的电脑有问题。
    我用的是XP，IE版本是6.0.2900.2180。

    谢谢：）
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • coldestice
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 15:12:2917楼 得分:0
    不好意思给各位大哥添麻烦了！
    我还是用截图比较方便说明。为了更清楚，我将主DIV的宽度改为400，内含的两个DIV宽度设置成了200，两个刚好是400像素宽：

    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • coldestice
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 15:17:0518楼 得分:0
    唉，上传到雅虎像册，链不过来。
    换个地方
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • xxmhl
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 15:19:3419楼 得分:0
    图不显示啊????
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • coldestice
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 15:20:1520楼 得分:0
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • coldestice
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 17:03:1621楼 得分:0
    图终于显示了：）
    还请各位大侠赐教！
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • Tina86
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 17:23:1322楼 得分:0
    我这边测试了，也不会出现你说的那个＂走＂字会跑到下一行的问题
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • chinmo
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：

    • 3

      9
    发表于：2008-02-18 17:27:1723楼 得分:0
    呵呵，完全是你电脑或者浏览器的问题
    我这边怎么测试都不会出现你的那个情况
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • xiaofanku
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 17:40:2124楼 得分:0
    一个大的DIV宽度为1000，//这个不要设置!让小的DIV去自动添充,记住CSS也支持继承的
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • lsc1202001
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 17:46:2825楼 得分:0
    nowrap="true"
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • coldestice
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 17:54:1926楼 得分:0
    真是太奇怪了：（
    我这里两个都测试了还是这样。
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • coldestice
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 18:04:0427楼 得分:0
    三台电脑测试都是如此。浏览器版本为IE6。

    用IE7和FF均无此问题。
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • coldestice
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 18:05:4028楼 得分:0
    经测试，nowrap="true"加上去仍然是这样。
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • chinmo
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：

    • 3

      9
    发表于：2008-02-18 18:13:2829楼 得分:0
    呵呵，那应该是你的浏览器问题了
    总之我这里怎么测试都没问题
    不加任何，就用你开始给的代码都没有出现
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • andy0502
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 18:34:2930楼 得分:20

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

    解决方法：

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

    详细：http://bbs.blueidea.com/thread-2692486-1-1.html
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • coldestice
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-18 19:16:0831楼 得分:0
    Andy大哥！
    谢谢你！！！！
    你的答案是正解！！！！
    将注释换个位置或者删除后显示正常！！！！！！！！！！！
    我太爱你了！！终于找到问题所在了！
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • cloudgamer
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-19 01:34:3032楼 得分:0
    学习了
    厉害
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • cloudgamer
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-19 01:40:0133楼 得分:0
    查了查书
    原来是ie6重复字符bug
    精通css的159页有详细解释

    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • coldestice
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-02-19 10:12:0334楼 得分:0
    刚才重新学习了一下这篇http://bbs.blueidea.com/thread-2692486-1-1.html
    研究得真是太经典太透彻了！
    这下子这个问题已经彻底不再让我烦恼了，感谢以下各位大哥的指导，谢谢！
    修改 删除 举报 引用 回复
    公司简介| 广告服务| 银行汇款帐号| 联系方式| 版权声明| 问题报告
    北京创新乐知广告有限公司 版权所有, 京 ICP 证 070598 号
    世纪乐知(北京)网络技术有限公司 提供技术支持
    文明办网文明上网举报电话：13552009689
    Copyright © 1999-2009, CSDN.NET, All Rights Reserved
    GongshangLogo