CSS - Absatz dehnt die Breite des DIV

Question

Derzeit habe ich einen Absatz in einem Div. Das div erstreckt sich mit einem langen Text als Absatz, wenn im mobilen Modus (768px) betrachtet. Wenn ich den langen Text durch einen kurzen Text, zum Beispiel "Box One", ersetzt habe, wird das div nicht gestreckt, da ich die div-Breite nicht überschritten habe. Wie kann ich den Absatz in eine neue Zeile aufteilen, wenn er im mobilen Modus die div-Breite erreicht? Ich habe mein Beispiel als Beispiel beigefügt.

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; 
    } 
} 

Answer 1

Hier gehen Sie:

.box { display: block; float: left; } 
.one.box p { overflow: hidden; word-wrap: break-word; } 

https://jsfiddle.net/60Lmtdtd/

Answer 2

können Sie word-wrap verwenden in Ihrem @media zu lange Wörter zwangs brechen:

word-wrap: break-word; 

Answer 3

Verwenden Sie die css word-wrap: break-word;, damit lange Wörter in der Lage sind, zu brechen und in die nächste Zeile einzufügen.