CSS网格和文本溢出:省略号 [英] CSS grids and text-overflow: ellipsis

问题描述

使用CSS网格时，即使将其应用于包含要缩短文本的dom对象，我似乎也无法设法使text-overflow:省略号起作用.

When using a CSS Grid, I can't seem to manage to make the text-overflow:ellipsis work, even though I am applying it to the dom object containing the text that I want to shorten.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;

  .grid-item { border: 1px solid red;}
  .grid-item .content{
    background-color: lightgray;
  }

  &.with-ellipsis {
    .title {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;

    }
  }
}

这是我的代码所在的笔: https://codepen.io/dbugger/pen/qBBKLgX?editors = 1100

This is the pen where my code is: https://codepen.io/dbugger/pen/qBBKLgX?editors=1100

推荐答案

在 .grid-item 上设置 min-width:0; .这是在flexbox项(和网格)的子项上使用省略号的旧解决方案，您可以阅读有关它的更多信息

Set min-width: 0; on the .grid-item. It's an old solution for ellipsis on children of flexbox items (and grid), and you can read more about it here.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid .grid-item {
  min-width: 0;
  border: 1px solid red;
}

.grid .grid-item .content {
  background-color: lightgray;
}

.grid.with-ellipsis .title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.demo {
  display: inline-block;
  width: 33%;
  border: 1px solid red;
}

.demo .content {
  background-color: lightgray;
}

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

<h1>But what happens when you want some content inside the cell to have text-overflow: ellipsis</h1>

<div class="grid with-ellipsis">
  <div class="grid-item">
    <div class="image">Some image</div>
    <div class="content">
      <div class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt excepturi obcaecati odio pariatur ipsam doloremque vel labore ipsa explicabo quos.</div>
    </div>
  </div>
  <div class="grid-item">
    <div class="image">Some image</div>
    <div class="content">
      <div class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt excepturi obcaecati odio pariatur ipsam doloremque vel labore ipsa explicabo quos.</div>
    </div>
  </div>
  <div class="grid-item">
    <div class="image">Some image</div>
    <div class="content">
      <div class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt excepturi obcaecati odio pariatur ipsam doloremque vel labore ipsa explicabo quos.</div>
    </div>
  </div>
  <div class="grid-item">
    <div class="image">Some image</div>
    <div class="content">
      <div class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt excepturi obcaecati odio pariatur ipsam doloremque vel labore ipsa explicabo quos.</div>
    </div>
  </div>
  <div class="grid-item">
    <div class="image">Some image</div>
    <div class="content">
      <div class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt excepturi obcaecati odio pariatur ipsam doloremque vel labore ipsa explicabo quos.</div>
    </div>
  </div>
  <div class="grid-item">
    <div class="image">Some image</div>
    <div class="content">
      <div class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt excepturi obcaecati odio pariatur ipsam doloremque vel labore ipsa explicabo quos.</div>
    </div>
  </div>
</div>

这篇关于CSS网格和文本溢出:省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！