在下一行文本超出div框

Question

以下是我的HTML:

<div class="title-box">    
    <div class="box1" style="background-image:url(/common/images/arrow-r.png); background-repeat: no-repeat; background-position: left center; margin:5px 0px 5px 5px;">
        <h1>Welcome to the PHP and CSS</h1>
    </div>
</div>

以下是我的CSS:

.title-box {
    border: 1px dashed #CCC;
    float: left;
    width: 540px;
    margin-bottom: 20px;
    word-wrap:break-word;
}

.title-box .box1 {
    font-size: 15px;
    padding: 5px;
}

.title-box .box1 h1 {
    padding: 5px; 
    text-align: left;
    color: #fff;
    margin-left: 35px;
}?

这里的<h1>标签包含标题.如果标题包含更多文本,例如:

<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h1>

然后它进入下一行,但下一行文本将超出div框.我提供了主div的宽度,它仍然离开div盒.我也尝试添加宽度到<h1>标签但仍然存在问题.

任何帮助.谢谢

Answer 1

因为你使用了540px的宽度 .title-box

去除宽度后http://jsfiddle.net/au5Jf/

但它仍然会以换行符直到宽度.title-box小于所有内容的宽度

如果你想在一行中粘贴内容而不是将宽度设置width:950px;为.title-box http://jsfiddle.net/XQXV2/