Using CSS grid, how to control which cell truncate when there's not enough place

Question

I'm trying to customize a css grid to avoid it to grow when there's not enough room for content.

The grid contains a text and an icon. I want to avoid the text to wrap but instead, it should truncate with elipsis.

Here's what I tried:

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html,
      body {
        width: 100vw;
        height: 100vh;
        background-color: silver;
      }
      .container {
        width: 200px;
        background-color: white;
        margin: auto;
        display: flex;
      }
      .grid {
        display: grid;
        flex-shrink: 0;
        grid-template-columns: auto 1fr;
      }
      .nowrap {
        white-space: nowrap;
      }
      .col1 {
        overflow: hidden;
      }

 <div class="container">
      <div class="grid">
        <div class="col1">
          <span class="nowrap">A very long text that should not wrap</span>
        </div>
        <div class="col2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="28"
            height="28"
            viewBox="0 0 24 24"
            fill="none"
            stroke="#6b9bd2"
            stroke-width="3"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
          </svg>
        </div>
      </div>
    </div>

It results in :

The grid should not expand out of the white box.

Expected output is:

I was able to reach this by manually set the width to hard coded value (175px). But I don't know the actual available space.

Please note that my actual requirement is to integrate into a 3rd party product. The available space is not fixed, and the use of display:grid is dicted by the design system of this product.

I'm confused by the bunch of grid css properties.

How to fix that ?

remove the flex-shrink:0 to allow the shriking the `ext-overflow: ellipsis;` on the col — Temani Afif, Jul 04 '23 at 21:06

score -1 · Answer 1 · answered Jul 04 '23 at 21:11

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  display: grid;
  place-items: center;
  min-height: 100vh;
}

.container {
  width: 200px;
  display: flex;
}

.grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.col1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="container">
  <div class="grid">
    <div class="col1">
      A very long text that should not wrap
    </div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="28"
      height="28"
      viewBox="0 0 24 24"
      fill="none"
      stroke="#6b9bd2"
      stroke-width="3"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
    </svg>
  </div>
</div>

Using CSS grid, how to control which cell truncate when there's not enough place

1 Answers1