flex 项目内的 CSS 省略号 [英] CSS ellipsis inside flex item

查看:21
本文介绍了flex 项目内的 CSS 省略号的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个基于 flexbox 的布局.两列,一个固定大小,第二个需要占用剩余空间.在增长列中,我有一个想要剪裁的字符串.

在 Chrome 中它工作正常.但它在 Firefox 和 IE 中不起作用.我试图通过使用相对和绝对位置为增长(弹性项目)内部元素提供宽度来修复它,但后来我得到了一个损坏的布局.损坏与元素的高度没有考虑到其所有子元素有关.

注意:flex增长项内的内部元素是用几个div标签构建的.

这是 jsFiddle.

.cols {显示:弹性;}.flex--0 {弹性:0 0 自动;}.flex--1 {弹性:1 1 自动;}.绝对{位置:绝对;}.相对的 {位置:相对;}.width--100 {宽度:100%;}.省略号{文本溢出:省略号;空白:nowrap;溢出:隐藏;}.边界 {边框:1px纯灰色;}

<h1>Flex 项目内的省略号</h1><h2>在 Chrome 中工作正常 在 FF 和 IE 中不工作</h2><div class="cols 边框"><div class="flex--0 border padding--sm">图标</div><div class="flex--1 边框填充--sm"><div class="ellipsis">图标 lkdjasdoif dlkjasdfo;isd fasldf ;asofj as;doifja dflkas d;laiksjdf oaisjdf asldkfj a;slkfdj as;oifj as;ldkfj asldkfjowiejf;jdfwwwwfw;lkefj asldkfj;aolfj aw;oiefjasl;dkfj a;slkdfj aodfj aw;lfjk as;lkdfj a;oiwefjr</div><div>图标</div><div>图标</div><div>图标</div>

<div>第二块</div><h2>尝试在 FF 和 IE 中修复(布局损坏)</h2><div class="cols 边框"><div class="flex--0 border padding--sm">图标</div><div class="flex--1 相对边框填充--sm"><div class="绝对宽度--100"><div class="ellipsis">图标 lkdjasdoif dlkjasdfo;isd fasldf ;asofj as;doifja dflkas d;laiksjdf oaisjdf asldkfj a;slkfdj as;oifj as;ldkfj asldkfjowiejf;jdfwwwwfw;lkefj asldkfj;aolfj aw;oiefjasl;dkfj a;slkdfj aodfj aw;lfjk as;lkdfj a;oiwefjr</div><div>图标</div><div>图标</div><div>图标</div>

<div>第二块</div>

解决方案

您可以将 min-width: 0; 添加到 flex item.

.flex--1 {弹性:1 1 自动;最小宽度:0;}

jsFiddle

或者添加overflow: hidden;.

.flex--1 {弹性:1 1 自动;溢出:隐藏;/*或自动*/}

jsFiddle

<小时>

为什么?

<块引用>

4.5.Flex 项目的隐含最小尺寸

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

<小时>

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

.container {显示:表;表格布局:固定;宽度:100%;}.省略号{文本溢出:省略号;空白:nowrap;溢出:隐藏;}

jsFiddle

I have a layout based on flexbox. Two columns, one fixed size and the second need to take the rest space. In the grow column I have a string that I want it to be clipped.

In Chrome it works fine. But it doesn't work in Firefox and IE. I tried to fix it by giving the grow (flex item) inner element a width by using relative and absolute positions, but then I got a corrupt layout. The corruption is related that the element's height doesn't take in account to all its child elements.

Note: the inner element inside the flex grow item is built with several div tags.

Here is the 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>

解决方案

You can add min-width: 0; to the flex item.

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

jsFiddle

Or add overflow: hidden; to it.

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

jsFiddle


Why?

4.5. Implied Minimum Size of Flex Items

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1.


Alternatively, you can wrap the content into a container.

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

jsFiddle

这篇关于flex 项目内的 CSS 省略号的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆