why is my grid content not wrapping text, or showing ellipsis? - css

Question

I am having trouble getting long-string text to wrap &/or show ellipsis. It's kind of like a table, but really it's 2 columns with rows.
I have tried messing around with the .line-flex and the .long-text-maybe classes, but no success.
Is there some sort of conflict between the grid wrapper & flex contents?
.box {
width: 50%;
}
.gridwrapp {
display: grid;
grid-gap: 8px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.line-flex {
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="box">
<div class="gridwrapp">
<div class="line-flex">
<p>Reservation ID: </p>
<p class="long-text-maybe">982398</p>
</div>
<div class="line-flex">
<p>Item Name: </p>
2020 Ram Promaster 1500 HR 136 WB Custom
</div>
<div class="line-flex">
<p>Name: </p>
<p class="long-text-maybe">Kim Bob</p>
</div>
<div class="line-flex">
<p>Location: </p>
<p class="long-text-maybe">Really long name in a place far far away</p>
</div>
</div>
</div>

Answer 1

You have to call directly to the children containing the text elements for ellipsis to take effect. Check out the CSS changes I made.
.box {
width: 50%;
}
.gridwrapp {
display: grid;
grid-gap: 8px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.line-flex {
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.line-flex > p, a {
text-overflow: ellipsis;
overflow: hidden;
}
<div class="box">
<div class="gridwrapp">
<div class="line-flex">
<p>Reservation ID: </p>
<p class="long-text-maybe">982398</p>
</div>
<div class="line-flex">
<p>Item Name: </p>
2020 Ram Promaster 1500 HR 136 WB Custom
</div>
<div class="line-flex">
<p>Name: </p>
<p class="long-text-maybe">Kim Bob</p>
</div>
<div class="line-flex">
<p>Location: </p>
<p class="long-text-maybe">Really long name in a place far far away</p>
</div>
</div>
</div>
You will have to use flex-wrap: wrap; to get your text to wrap automatically. This includes getting rid of the white-space: nowrap; on your line-flex so that the text can wrap.
See here:
.box {
width: 50%;
}
.gridwrapp {
display: grid;
grid-gap: 8px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.line-flex {
display: flex;
align-items: center;
overflow: hidden;
flex-wrap: wrap;
}
<div class="box">
<div class="gridwrapp">
<div class="line-flex">
<p>Reservation ID: </p>
<p class="long-text-maybe">982398</p>
</div>
<div class="line-flex">
<p>Item Name: </p>
2020 Ram Promaster 1500 HR 136 WB Custom
</div>
<div class="line-flex">
<p>Name: </p>
<p class="long-text-maybe">Kim Bob</p>
</div>
<div class="line-flex">
<p>Location: </p>
<p class="long-text-maybe">Really long name in a place far far away</p>
</div>
</div>
</div>