0

我正在使用水平视差构建网页。我花了很长的一页并将其分成不同的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

4

设置white-space: normal;你.inner-container的文字在里面换行

于 2013-07-23T07:53:33.213 回答
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 回答
-1

好的，您要做的是在每个 div 上创建一个最大宽度或仅一个宽度，因为我注意到那里的所有内容都没有最大宽度和宽度，因此请确保您在所有内容上都有一个宽度，因为 div 可以重叠另一个 div 如果它没有设置任何宽度。还

于 2013-07-23T07:52:02.787 回答