[英]CSS - Paragraph is stretching the width of the DIV
Currently I have a paragraph inside a div. 目前,我在div中有一个段落。 The div stretches with I put in a long text as the paragraph when viewed in mobile mode (768px).
在移动模式下(768px)观看时,div会以长文本作为段落进行拉伸。 When I replaced the long text with a short text for example 'Box One', it does not stretch the div as I have not exceed the div width.
当我将长文本替换为短文本(例如“ Box One”)时,它不会拉伸div,因为我没有超过div宽度。 How can I make the paragraph break into a new line when it reaches the div width when viewed in mobile mode?
在移动模式下查看时,如何使段落达到div宽度时换行? I have attached my jsfiddle as an example.
我以我的jsfiddle为例。
https://jsfiddle.net/ModestGrey/az4ca9j8/ https://jsfiddle.net/ModestGrey/az4ca9j8/
HTML 的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 的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;
use the css word-wrap: break-word;
使用CSS
word-wrap: break-word;
to Allow long words to be able to break and wrap onto the next line. 允许长单词能够折断并绕到下一行。
Here you go: 干得好:
.box { display: block; float: left; }
.one.box p { overflow: hidden; word-wrap: break-word; }
https://jsfiddle.net/60Lmtdtd/ https://jsfiddle.net/60Lmtdtd/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.