在下一行文字是走出去的div箱

下面的是我的HTML：在下一行文字是走出去的div箱

<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>

然後，它將轉到下一行，但接下來的行文本將出格框。我提供了寬度的主要股利仍然它的出格的盒子。我也嘗試將寬度添加到<h1>標籤，但問題仍然存在。

任何幫助。由於

來源

2012-12-19 Sky

它，因爲你已經在.title-box

使用的寬540px去除寬度http://jsfiddle.net/au5Jf/

之後，但它仍然會在新行，直到的.title-box寬度小於所有內容的寬度

如果您想要將內容粘貼在一行內，而不是將寬度設置爲width:950px;至.title-boxhttp://jsfiddle.net/XQXV2/

來源

2012-12-19 06:59:54

實際上你的div寬度是固定的，你的文本寬度超過div，所以它會熄滅。集格寬度auto

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

來源

2012-12-19 07:02:35

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

來源

2012-12-19 09:20:38

只是使用CSS屬性我面臨同樣的問題，但它解決了

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

來源

2013-11-30 10:27:16 Zeeshan

在下一行文字是走出去的div箱

回答

相關問題