代码之家 › 专栏 › 技术社区 › user1763510

CSS文本溢出省略号不在网格/flex中工作

css-grid grid flexbox css3 css

user1763510 · 技术社区 · 6 年前

我无法让文本溢出省略号在CSS网格中工作。文本被截断,但不显示省略号点。这是我的CSS:

.grid {
  display: grid;
  margin: auto;
  width: 90%;
  grid-template-columns: 2fr 15fr
}

.gridItem {
  border: 1px solid red;
  display: flex;
  height: calc(50px + 2vw);
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="grid">
  <div class="gridItem">Why no ellipsis on this div?</div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
</div>

https://codepen.io/anon/pen/zLrPdr

2 回复 | 直到 6 年前

Michael Benjamin 6 年前

.gridItem {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(50px + 2vw);
    border:1px solid red;
}

<div class="gridItem">Why no ellipsis on this div?</div>

<div class="gridItem"><span>Why no ellipsis on this div?</span></div>

min-width: 0 min-width: auto

.grid {
  display: grid;
  margin: auto;
  width: 90%;
  grid-template-columns: 2fr 15fr;
}

.gridItem {
  display: flex;
  align-items: center;
  height: calc(50px + 2vw);
  border: 1px solid red;
  min-width: 0;
}

.gridItem > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="grid">
  <div class="gridItem"><span>Why no ellipsis on this div?</span></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
  <div class="gridItem"></div>
</div>

revised codepen

pretzelhammer Paras Bhattrai 6 年前

.gridItem display: flex; https://css-tricks.com/flexbox-truncated-text/

推荐文章

Alvaro sepulveda · 如何在平面zx和z以及gnuplot中绘制垂直线

6 年前

Tim Hughes · 具有多个循环模板的php查询

6 年前

Nitin Karande · 如何在HTML中使用引导程序使用逐列垂直网格

6 年前

Mateja Petrovic · 正确地将图元的角磨圆

6 年前

Domagoj · 使用xml自动调整网格布局中按钮的大小(android studio)

6 年前

Fan4i · 如何使用字典获取网格中的点位置?

6 年前

usernameabc · 当有不同大小的列时,如何修复网格?

7 年前

Josh Rodgers · 居中网格项目

7 年前

joeyvanlierop · 兰顿的蚂蚁一直在对角移动

7 年前

João · WordPress主题需要jQuery代码优化

7 年前