0

水平視差を使用して Web ページを作成しています。div長いページを別のタグに分割しました。ただし、テキストを特定のセクションに留め、ページの別の部分に流れないようにするにはどうすればよいでしょうか? 私は試してみましword-wrap: break-wordたが、役に立ちませんでした。ウェブサイト: http://andrewgu12.kodingen.com/

HTML:

<div id="transition-slide-container">               
            <div id="transition-slide"><!--begin transition-slide-->           
                <div class="slide" id="home"><!--begin home-->
                    <div id="inner-container">
                        <div id="title"><h2>Hey there!</h2></div>   
                        <div class="row" id="homepage">
                                       <div class="small-12 columns">
                                            <p>Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. </p>
                                       </div>
                                  </div>
                    </div>
                </div><!-- end home-->
</div>

CSS:

div#transition-slide-container {    
    background: #bee1ff;    
    padding-top: 128px;
    padding-bottom: 50px;
    width: 400%;        
}
div#inner-container {
     margin-left: 0;
}
div#transition-slide {
     white-space: nowrap;
     left: 0;
}
.slide {
     display: inline-block;
     min-width: 24.99%;
     margin: 0 auto;    
     z-index: 1;
 }
 div#inner-container {
     text-align: left;
     max-width: 960px;
     margin: 0 auto;
     padding: 0;
 }
 div#inner-container p {    
     font-size: 24px;
     word-wrap: break-word; 
 }
4

3 に答える 3

0

私は koala_dev に同意しますが、あなたの言葉が離れていてもなぜこれが起こっているのかを追加したいと思います。その理由は、テキストをここで折り返さないように設定しているためです:

div#transition-slide {
 white-space: nowrap;
 left: 0;
}

したがって、このセレクターからこれを削除するwhite-space: nowrap;と、テキストが折り返されることを確認できます。これにより、折り返すために余分なマークアップを追加する必要がなくなります。

繰り返しますが、あなたはこう言っています: ラップしないで... ラップ... ラップしないで、デフォルトでラップさせてください。

余談ですが、スペースを含まない単語 (長い URL など) を追加するときにテキストが折り返されないことが心配な場合は、テキストがコンテナーの外側に流れる傾向がありword-wrap: break-word;ます。CSS 親コンテナーで使用できます。 .

于 2013-07-23T08:14:40.180 に答える