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

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 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 >
  <div >
<div >
  <p>Reservation ID: </p>
  <p >982398</p>
</div>
<div >
  <p>Item Name: </p>
  <a href="/items/342342">2020 Ram Promaster 1500 HR 136 WB Custom</a>
</div>
<div >
  <p>Name: </p>
  <p >Kim Bob</p>
</div>
<div >
  <p>Location: </p>
  <p >Really long name in a place far far away</p>
</div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
<div >
  <p>Reservation ID: </p>
  <p >982398</p>
</div>
<div >
  <p>Item Name: </p>
  <a href="/items/342342">2020 Ram Promaster 1500 HR 136 WB Custom</a>
</div>
<div >
  <p>Name: </p>
  <p >Kim Bob</p>
</div>
<div >
  <p>Location: </p>
  <p >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 >
  <div >
<div >
  <p>Reservation ID: </p>
  <p >982398</p>
</div>
<div >
  <p>Item Name: </p>
  <a href="/items/342342">2020 Ram Promaster 1500 HR 136 WB Custom</a>
</div>
<div >
  <p>Name: </p>
  <p >Kim Bob</p>
</div>
<div >
  <p>Location: </p>
  <p >Really long name in a place far far away</p>
</div>
  </div>
</div>