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

Luca Uliana — Wed, 03 Jan 2018 13:51:50 +0000

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? :(

DEV Community: Luca Uliana

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