以下是我的 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>
标记,但问题仍然存在。
任何帮助。谢谢
最佳答案
因为你在.title-box
中使用了540px的宽度
删除宽度后 http://jsfiddle.net/au5Jf/
但它仍然会换行,直到 .title-box
的宽度小于所有内容的宽度
如果你想把内容放在一行中,你可以将宽度 width:950px;
设置为 .title-box
http://jsfiddle.net/XQXV2/
关于html - 在下一行文本将超出 div 框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13947045/