How to limit grid cell width and prevent its content from overflowing?

Question

A framework I am using that generates HTML code outputs the following:

body {
  width: 200px; /* ignore this, this is only for demonstration purpose */
}

<div class="select-option-text" style="white-space: nowrap; overflow: hidden;">
  Some very long text that should be truncated with an ellipsis if it's too long to fit
  <span class="select-option-secondary-text">Always show</span>
</div>

What I want to achieve is to always have .select-option-secondary-text visible next to the text. With a short text, this works fine, but if the text is long like in my example, it pushes the .select-option-secondary-text off the visible area.

I wasn't able to fix this using flexbox, but I was able to get somewhat near my requirement using grid:

body {
  width: 200px; /* ignore this, this is only for demonstration purpose */
}

.select-option-text {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: minmax(0, 1fr) auto;
}

<div class="select-option-text" style="white-space: nowrap; overflow: hidden;">
  Some very long text that should be truncated with an ellipsis if it's too long to fit
  <span class="select-option-secondary-text">Always show</span>
</div>

However, the first "cell" still overflows into the second "cell". Using a background color is not really an option because .select-option-text has its own background color set programmatically with JS and I don't know that color. I also cannot wrap the long text into a span or something because as I said, this structure is created dynamically by a third-party JS library.

Anything I can do to prevent the text from spilling into the next cell, maybe even truncate it with an ellipsis?

if background-color is not an option, then you should wrap that text too, so you can access its box via a CSS selector to reset overflow and ellipsis . https://jsfiddle.net/96ybuxho/ — G-Cyrillus, Jun 17 '21 at 15:56
Not possible in CSS without wrapping the long text in an HTML element. Something [like this](https://jsfiddle.net/tzmf4w9x/)... AND, [you can't insert HTML elements using CSS pseudo elements](https://stackoverflow.com/questions/3102259/css-content-text-how-do-i-add-tags). — Michael Benjamin, Jun 17 '21 at 16:28

score 0 · Answer 1 · answered Jun 17 '21 at 16:52

It's a little hard to know for sure since there's not much context, but if I'm correctly understanding what you want to achieve, this is what I would do:

.select-option-secondary-text {
position: absolute;
left: 200px; [or whatever the value should be]
}

Also, if you remove the grid stuff, you can add text-overflow: ellipsis to your .select-option-text div.

score 0 · Accepted Answer · answered Jun 30 '21 at 18:10

0

Apparently not possible with CSS without wrapping the text in its own element.

answered Jun 30 '21 at 18:10

Sebastian Mares

77
1
6

How to limit grid cell width and prevent its content from overflowing?

2 Answers2