Currently I have a paragraph inside a div. The div stretches with I put in a long text as the paragraph when viewed in mobile mode (768px). 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. How can I make the paragraph break into a new line when it reaches the div width when viewed in mobile mode? I have attached my jsfiddle as an example.
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;
use the 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; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.