[英]CSS - Paragraph is stretching the width of the DIV
目前,我在div中有一個段落。 在移動模式下(768px)觀看時,div會以長文本作為段落進行拉伸。 當我將長文本替換為短文本(例如“ Box One”)時,它不會拉伸div,因為我沒有超過div寬度。 在移動模式下查看時,如何使段落達到div寬度時換行? 我以我的jsfiddle為例。
https://jsfiddle.net/ModestGrey/az4ca9j8/
的HTML
<div class="boxes">
<div class="one box"><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></div>
<div class="two box"><p>Box Two</p></div>
<div class="three box"><p>Box Three</p></div>
<div class="four box"><p>Box Four</p></div>
</div>
的CSS
.boxes {
width: 50%;
margin: 0 auto;
}
.box {
display: inline-block;
width: 24%;
height: 15em;
color: #fff;
}
.one {
background: #333;
}
.two {
background: #fff;
color: #333;
}
.three {
background: #aaa;
}
.four {
background: #dc002e;
}
@media only screen and (max-width:48em) {
.boxes {
display: table;
width: 100%;
}
.box {
display: block;
width: 100%;
}
.three {
display: table-caption;
}
.four {
display: table-caption;
}
.one {
display: table-caption;
}
.two {
display: table-caption;
}
}
您可以使用自動換行的內@media
給力,打破長的話:
word-wrap: break-word;
使用CSS word-wrap: break-word;
允許長單詞能夠折斷並繞到下一行。
干得好:
.box { display: block; float: left; }
.one.box p { overflow: hidden; word-wrap: break-word; }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.