CSS - Paragraf DIV

Question

genişliğini esnetiyor Şu anda bir div içinde paragrafım var. Div, mobil modda (768px) görüntülendiğinde paragraf olarak uzun bir metne koydum. Uzun metni kısa bir metinle değiştirdiğimde, örneğin 'Box One', div genişliğini geçmediği için div'i uzatmaz. Mobil modda görüntülendiğinde div genişliğine ulaştığında paragrafı yeni bir satıra nasıl ayırabilirim? Jsfiddle'ımı örnek olarak ekledim.

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

gitmek:

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

https://jsfiddle.net/60Lmtdtd/

Answer 2

Sen uzun kelimeleri zorla kırmak için @media içinde word-wrap kullanabilirsiniz:

word-wrap: break-word; 

Answer 3

css word-wrap: break-word;'u kullanın Uzun sözcüklerin bir sonraki satıra kırılmasına ve sarılmasına izin ver. İşte