Word-Wrap Not Working in a Css Grid Item
I Have a Paragraph Text Without Line Breaks. It Is Supposed to Be Wrapped to a New Line If the Width Exceeds the Width of the Grid Container. It Works If the...
I have a paragraph text without line breaks. It is supposed to be wrapped to a new line if the width exceeds the width of the grid container. It works if the container is not a grid.
I tried the solution from Prevent content from expanding grid items but not working. A similar question word-wrap in a CSS grid seems to be using tables which is outdated and not recommended in HMTL5
JSFiddle:
.container {
display: grid;
grid-template-rows: auto;
width: 500px;
background: lightsalmon;
min-width: 0;
min-height: 0;
background:peru;
}
.child{
padding:30px;
margin:30px;
width:100%;
background:indigo;
}
.item{
background:indianred;
padding:30px;
margin:30px;
width:100%;
}
.item p {
min-width: 0;
min-height: 0;
color:gold ;
word-wrap: break-word;
max-width: 100%;
}<div class="container">
<div class="child">
<div class="item">
<p>lolololololololololololololololololololololololololololololololololololololololololo
lolololololololololololololo</p>
</div>
</div>
</div>2 Answers
Use style word-breaK:break-all as mentioned below:
.item p {
min-width: 0;
min-height: 0;
color:gold ;
word-wrap: break-word;
word-break: break-all;
max-width: 100%;
}
The reason is that word-wrap: break-word will only break the words. So if for an example, if your paragraph has multiple words and you want to break them then this style will be used. And here your text inside p itself is one word.
While word-break: break-all; is used when you want to break the word.
try using word-break: break-word;
.container {
display: grid;
grid-template-rows: auto;
width: 500px;
background: lightsalmon;
min-width: 0;
min-height: 0;
background:peru;
}
.child{
padding:30px;
margin:30px;
background:indigo;
}
.item{
background:indianred;
padding:30px;
margin:30px;
}
.item p {
min-width: 0;
min-height: 0;
color:gold ;
word-break: break-word;
max-width: 100%;
}<div class="container">
<div class="child">
<div class="item">
<p> lolololololololololololololololololololololololololololololololololololololololololololololololololololololololo
</p>
</div>
</div>
</div>Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.
