4

以下是我的 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>标签添加宽度，但问题仍然存在。

任何帮助。谢谢

4

4 回答 4

5

这是因为您使用了 540px 的宽度.title-box

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

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

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

于 2012-12-19T06:59:54.633 回答
2

实际上，您的 div 宽度是固定的，并且您的文本的宽度大于 div，因此它会消失。将 div 宽度设置为auto

.title-box {
    border: 1px dashed #CCC;
    float: left;
    width: auto;
    margin-bottom: 20px;
}
于 2012-12-19T07:02:35.707 回答
1

现场演示

<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

于 2012-12-19T09:20:38.937 回答
1

只需使用 CSS 属性我面临同样的问题，但它通过解决

#divname {
    word-wrap: break-word;
}
于 2013-11-30T10:27:16.053 回答