flex项目内的CSS省略号

阿莫斯·N。

我有一个基于flexbox的布局。两列,一列固定大小,第二列需要占用其余空间。在成长列中,我有一个字符串,希望它被剪切。

在Chrome中可以正常运行。但它在Firefox和IE中不起作用。我试图通过使用相对位置和绝对位置来给grow(flex item)内部元素一个宽度来修复它,但是随后我得到了一个损坏的布局。损坏与元素高度未考虑其所有子元素有关。

注意:flex grow项目内部的内部元素是用几个div标签构建的

这是jsFiddle

.cols {
  display: flex;
}

.flex--0 {
  flex: 0 0 auto;
}

.flex--1 {
  flex: 1 1 auto;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.width--100 {
  width: 100%;
}

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

.border {
  border: 1px solid gray;
}
<h1>Ellipsis inside Flex item</h1>

<h2>Working fine in Chrome Not working in FF and IE</h2>

<div class="cols border">
  <div class="flex--0 border padding--sm">Icon</div>
  <div class="flex--1 border padding--sm">
    <div class="ellipsis">Icon lkdjasdoif dlkjasdfo;isd fasldf ;asofj as;doifja dflkas d;laiksjdf oaisjdf asldkfj a;slkfdj as;oifj as;ldkfj asldkfjowiejfa;wlkdfj as;lkdjf as;lkdfj a;osifj aw;lkefj asldkfj ;aolifj aw;oiefjasl;dkfj a;slkdfj aodfj aw;lfjk as;lkdfj a;oiwefjr</div>
    <div>Icon</div>
    <div>Icon</div>
    <div>Icon</div>
  </div>
</div>

<div>Second BLOCK</div>

<h2>Trying to fix in FF and IE (Layout corrupts)</h2>
<div class="cols border">
  <div class="flex--0 border padding--sm">Icon</div>
  <div class="flex--1 relative border padding--sm">
    <div class="absolute width--100">
      <div class="ellipsis">Icon lkdjasdoif dlkjasdfo;isd fasldf ;asofj as;doifja dflkas d;laiksjdf oaisjdf asldkfj a;slkfdj as;oifj as;ldkfj asldkfjowiejfa;wlkdfj as;lkdjf as;lkdfj a;osifj aw;lkefj asldkfj ;aolifj aw;oiefjasl;dkfj a;slkdfj aodfj aw;lfjk as;lkdfj a;oiwefjr</div>
      <div>Icon</div>
      <div>Icon</div>
      <div>Icon</div>
    </div>
  </div>
</div>

<div>Second BLOCK</div>

贴纸

您可以添加min-width: 0;到弹性项目。

.flex--1 {
  flex: 1 1 auto;
  min-width: 0;
}

jsFiddle

或添加overflow: hidden;到它。

.flex--1 {
  flex: 1 1 auto;
  overflow: hidden; /*or auto*/
}

jsFiddle


为什么?

4.5。弹性项目的隐含最小大小

为了为弹性商品提供更合理的默认最小尺寸,此规范引入了一个新auto值作为CSS 2.1中定义min-widthmin-height属性的初始值


或者,您可以将内容包装到容器中。

.container {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

jsFiddle

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

文本溢出:高度有限的div内的弹性高度div内的省略号

来自分类Dev

三行或更多行的纯CSS省略号

来自分类Dev

避免TListView项目剪切并用省略号替换的简单方法

来自分类Dev

使用jQuery检测CSS文本超低省略号

来自分类Dev

CSS文字省略号和100%宽度

来自分类Dev

CSS文字溢出省略号+以%表示的宽度无效

来自分类Dev

带有省略号的CSS文字换行

来自分类Dev

带省略号的浮动div的CSS-宽度未知

来自分类Dev

处理省略号

来自分类Dev

Reduce()和...(省略号)

来自分类Dev

文本溢出省略号和flex在Firefox上不起作用

来自分类Dev

如何使用CSS实现单行省略号

来自分类Dev

省略项中的省略号省略

来自分类Dev

如何使省略号在具有动态宽度(flex:1)的flex项目上工作?

来自分类Dev

CSS“文本溢出:省略号”,并将元素垂直居中

来自分类Dev

Delphi IDE中的“项目选项”中的省略号按钮是否有键盘快捷键?

来自分类Dev

文本溢出:省略号在嵌套的flex容器中不起作用

来自分类Dev

带有内联元素的CSS省略号?

来自分类Dev

结构省略号

来自分类Dev

CSS文字溢出:省略号不取决于宽度

来自分类Dev

带省略号的浮动div的CSS-宽度未知

来自分类Dev

按钮内容内的省略号Windows Phone

来自分类Dev

居中渐变省略号CSS阴影

来自分类Dev

JavaScript链接省略号

来自分类Dev

简单的JavaScript省略号(...)

来自分类Dev

CSS用省略号填充表TD内的空格

来自分类Dev

CSS 文本溢出省略号无法正确显示

来自分类Dev

css。文本溢出不起作用:省略号

来自分类Dev

句子中间省略号

Related 相关文章

热门标签

归档