文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS文本-溢出省略号在网格/ Flex中不起作用

问CSS文本-溢出省略号在网格/ Flex中不起作用
EN

Stack Overflow用户

提问于 2018-07-16 02:41:43

回答 1查看 4.8K关注 0票数 9

我不能让text-overflow省略号在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>

flexbox

grid

css-grid

html

css

回答 1

Stack Overflow用户

发布于 2018-07-16 02:53:27

问题似乎是.gridItem上有display: flex;样式，如果你去掉它，它就能工作。如果您需要在您的网格项目上使用display: flex;，那么本文可能会有所帮助：https://css-tricks.com/flexbox-truncated-text/

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51351137

复制

相似问题

问CSS文本-溢出省略号在网格/ Flex中不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS文本-溢出省略号在网格/ Flex中不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS文本-溢出省略号在网格/ Flex中不起作用
EN