我正在使用水平视差构建网页。我花了很长的篇幅将其分成不同的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;
}
答案 0 :(得分:4)
在white-space: normal;
上设置.inner-container
以在其中进行文字换行
答案 1 :(得分:0)
我同意koala_dev,但是我想补充一下为什么即使你的文字是间隔的,也会发生这种情况,原因是因为你设置的文字没有包裹在这里:
div#transition-slide {
white-space: nowrap;
left: 0;
}
因此,从此选择器中删除此white-space: nowrap;
,您可以确保文本换行,这样您就不需要添加额外的标记来使其换行。
重申你的意思是:不要包装......然后包装...为什么不说不包装并默认包装?
另外,如果您在添加没有空格的单词(例如长URL)时担心文本没有换行,那么文本往往会流到它的容器外...那么您可以使用{{ 1}}在你的CSS父容器中。
答案 2 :(得分:-1)
好的你要做的就是在每个div上制作一个max-width或者只是一个宽度,因为我注意到那里的所有东西都没有最大宽度和宽度,所以要确保你的所有东西都有宽度,因为a如果div具有任何宽度设置,则div可以与另一个div重叠。还