Html 在下一行，文本将从div框中消失

以下是我的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>

这里的

标记包含标题。如果标题包含更多文本，如：

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

Lorem ipsum door sit amet，一位杰出的领导者，他是一位伟大的领袖

然后它将转到下一行，但下一行文本将从div框中取出。我提供了主div的宽度，但它仍将从div框中取出。我也尝试过给

标签增加宽度，但问题仍然存在

---

任何帮助。谢谢

这是因为您在

标题框中使用了540px的宽度

去除宽度后

但它仍将换行，直到

标题框的宽度小于所有内容的宽度

如果要将内容粘贴在一行中，可以设置宽度
width:950px
到
。标题框
实际上，您的div宽度是固定的，并且您的文本的宽度大于div，因此它将消失。
将div width设置为
auto

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


<div class="title-box">    
    <div class="box1" style="background:#000; background-position: left center; margin:5px 0px 5px 5px;">
        <h1>Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS</h1>
    </div>
</div>

只添加一个
换行：断开单词
到
。标题框
只需使用CSS属性，我面临同样的问题，但它由

#divname {
    word-wrap: break-word;
}

  .title-box{width:100%; word-wrap:break-word;}
.title-box .box1{font-size: 15px;  padding:10px;}
.title-box .box1 h1{padding: 5px; text-align:justify; color: #fff;}​

#divname {
    word-wrap: break-word;
}