html - 在下一行文本将超出 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

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

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

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

如果你想把内容放在一行中，你可以将宽度 width:950px; 设置为 .title-box http://jsfiddle.net/XQXV2/