loading...

Grid cell issue with white-space: nowrap & text-overflow: ellipsis

timhecker profile image Luca Uliana Updated on ・1 min read

N.B.: I solved with min-width: 0 applied on each .grid__item, like in flexbox world.

Anyone can help me with this css grid stuff?

I have a complicated HTML structure:

<div class="grid">
  <div class="grid__item">
    <div>
        <a href="#">
            <div class="grid__detail">
              <h2>Lorem ipsum, dolor sit amet consectetur adipisicing elit.....very long title</h2>
            </div>
        </a>
    </div>
  </div>
  [...]
</div>

And I'm using CSS grids:

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 2rem;
}

I need a box-shadow on a inner div:

.grid__item div {
    box-shadow: 0 0 10px red;
}

with a long text title, I need the text-overflow prop to truncate it:

.grid__item h2 {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
}

For some weird reasons the cells grow up, until to contain the whole text, and so, my grid breaks down. overflow: hidden on my grid cell solves the issue, but I can't use box-shadows on the inner div.

.grid__item {
    // overflow: hidden; // this fixes the problem, but say goodbye to the inner box-shadow
        min-width: 0; // this fixes the problem with truncate text
}

Any ideas? :(

Discussion

pic
Editor guide
Collapse
timhecker profile image
Luca Uliana Author

I solved with min-width: 0 applied on each .grid__item, like in flexbox world ;)

Collapse
reenan profile image
Renan Souza

Thank you for putting this here. Helped me with the same issue today.

Collapse
mateus_vahl profile image
Mateus Vahl

Thanks

Collapse
renannobile profile image
Renan Lourençoni Nobile

I played a little with your code, is this what you need?

Collapse
timhecker profile image
Luca Uliana Author

Mmh, i'm in a responsive environment, I can't use absolute widths, like 300px.

Collapse
renannobile profile image
Renan Lourençoni Nobile

What if you change 300px to 100vw?

Thread Thread
timhecker profile image
Luca Uliana Author

This works, but it's not a solution for me :( you changed the repeat() function with auto-fill, but I need 4 cols. For the moment I solved using flex instead of grid.

Collapse
admtech profile image
Admtech

You can also solve it by following instructions:
grid-template-columns: repeat(4, minmax(0, 1fr));

Is similar to the "min-width: 0" but more elegant :-)

greeting
frank

Collapse
alephnaught2tog profile image
M. Shemayev

So to clarify--you want those three paragraphs in a row, with the box shadow under each one, and for the title to be truncated instead of wrap, correct?

Collapse
timhecker profile image
Luca Uliana Author

Yep, more or less

Collapse
obilikvar profile image
Orhan

Solved: margin-right: -100%;

*Solution in another example: margin-right: 0%;