0

Despite following the instructions from here as referenced by many, I cannot get text to get truncated by an ellipsis in a grid.

Here's my html:

<div class=grid>
<span>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla.</span>
<span>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla.</span>
</div>

And my css:

.grid {
  display: grid;
  grid-template-rows: 70px 70px;
  grid-template-columns: 100%;
  margin: 12px;
}

span {
  border: 1px solid blue;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 6px;
}

.grid, span {
  min-width: 0;
  min-height: 0;
}

And as you can see in this fiddle, the ellipsis is not showing. Would love to get some help on this.

Chris Homan
  • 35
  • 4

1 Answers1

0

You forgot to add a white-space: nowrap

span {
  white-space: nowrap; <<
  border: 1px solid blue;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 6px;
}
BRO_THOM
  • 824
  • 9
  • 24
  • Appreciated but I want the text to fill the available space and not be on one line so that's not an option. – Chris Homan Jan 02 '20 at 14:29
  • My apoligies - with current HTML/CSS standardisation it's not possible to do this from a frontend perspective. The only thing you can do is cut the text to a specific amount of characters and simple add `"..."`. The answer you're looking for is called line clamping but it's only supported on Chrome: https://css-tricks.com/line-clampin/ – BRO_THOM Jan 02 '20 at 14:31