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/

Answer 2

实际上你的div宽度是固定的，你的文字宽度大于div，所以它会出去。将div宽度设置为auto

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

Answer 3

<强> Live DEMO

<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

  .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;}

仅向word-wrap:break-word;

添加.title-box

Answer 4

只使用CSS属性我面临同样的问题，但它由

解决

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

在下一行文本超出div框

4 个答案: