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;コンテンツを1行に固定する場合は、幅をhttp://jsfiddle.net/XQXV2/に設定できます。.title-box

于 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 に答える