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

Issue

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>
  <a href="/items/342342">2020 Ram Promaster 1500 HR 136 WB Custom</a>
</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>

Solution

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>
  <a href="/items/342342">2020 Ram Promaster 1500 HR 136 WB Custom</a>
</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>
  <a href="/items/342342">2020 Ram Promaster 1500 HR 136 WB Custom</a>
</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>

Answered By - カメロン