文字溢出:省略号和flex

问题描述

我有一个设置了 display:flex 属性的容器元素.一个孩子的宽度是固定的( flex:0 0 auto )，另一个孩子的宽度不是( flex:1 ).灵活的子代还有其他一些子代:我希望此容器( inner )根据父代宽度裁剪其子代.

我设法做到了这一点，但是我也想让省略号溢出，以防内容被裁剪(孩子的数量不固定).

到目前为止，这是我的代码:

  .outer {边框:1px纯红色；显示:flex;宽度:400像素；}.inner {显示:flex;最小宽度:0；溢出:隐藏；flex:1;文字溢出:省略号；}.孩子 {显示:inline-block;空白:nowrap;flex:1;边框:1px纯蓝色；}.btn {边框:1px纯绿色；flex:0 0自动;} 

住在这里:

解决方案

您的布局存在一些问题:

1. 文本溢出:省略号仅适用于 display:block 和 display:inline-block 容器.之所以失败，是因为您已将 .inner 设置为 display:flex .

2. 文本溢出:省略号必须在同一声明中包含 white-space:nowrap .您的 .inner 规则中缺少该标签.

3. 省略号适用于文本，而不适用于块级元素

尝试一下:

  * {边距:15像素1像素}.outer {边框:1px纯红色；显示:flex;宽度:400像素；}.inner {/*显示:flex *//*删除*/最小宽度:0；溢出:隐藏；flex:1;文字溢出:省略号；空白:nowrap;/* 新的 */}.孩子 {显示:内联；/*调整后的*/空白:nowrap;flex:1;}.btn {边框:1px纯绿色；flex:0 0自动;}  

 < div class ="outer">< div class ="inner">< div class ="child"> child 1</div>< div class ="child"> child 2</div>< div class ="child"> child 3</div>< div class ="child"> child 4</div>< div class ="child"> child 5</div>< div class ="child"> child 6</div>< div class ="child"> child 7</div></div>< div class ="btn">我的大大大的按钮！</div></div>  

有关文本溢出:省略号的更多信息，请参见:将省略号应用于多行文本

I have a container element with display: flex property set.A children have fixed width (flex: 0 0 auto), another one no (flex: 1). The flexible children has some other children: I want this container (inner) to clip its children according to the parent width.

I managed to do this, but also I'd like to get the ellipsis overflow in case the content is clipped (the number of children is not fixed).

This is my code so far:

.outer {
  border: 1px solid red;
  display: flex;
  width: 400px;
}

.inner {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
}

.child {
  display: inline-block;
  white-space: nowrap;
  flex: 1;
  border: 1px solid blue;
}

.btn {
  border: 1px solid green;
  flex: 0 0 auto;
}

Live here: http://jsbin.com/niheyiwiya/edit?html,css,output

How can I get the following desired result? (hacks welcome - css only please!)

解决方案

There are a few problems with your layout:

1. text-overflow: ellipsis only works with display: block and display: inline-block containers. It's failing because you have .inner set to display: flex.

2. text-overflow: ellipsis must include white-space: nowrap in the same declaration. It's missing in your .inner rule.

3. ellipsis works on text, not block-level elements

Try this:

* {
  margin: 15px 1px
}
.outer {
  border: 1px solid red;
  display: flex;
  width: 400px;
}
.inner {
  /* display: flex */          /* removed */
  min-width: 0;
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;         /* new */
}
.child {
  display: inline;             /* adjusted */
  white-space: nowrap;
  flex: 1;
}
.btn {
  border: 1px solid green;
  flex: 0 0 auto;
}

<div class="outer">
  <div class="inner">
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 4</div>
    <div class="child">child 5</div>
    <div class="child">child 6</div>
    <div class="child">child 7</div>
  </div>
  <div class="btn">My big big big button!</div>
</div>

More about text-overflow: ellipsis here: Applying an ellipsis to multiline text

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