文本溢出：省略号和弹性布局

Question

我有一个使用了display: flex属性的容器元素。 其中一个子元素有固定宽度（flex: 0 0 auto），另一个没有（flex: 1）。这个灵活的子元素还有其他子元素：我想让这个容器（inner）根据父元素的宽度截取其子元素。

我已经成功做到了这一点，但是如果内容被截断（子元素数量不固定），我还想获得省略号溢出。

目前这是我的代码：

.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;
}

住在这里：http://jsbin.com/niheyiwiya/edit?html,css,output

如何获得以下期望结果？（欢迎使用hack - 请仅使用CSS！）

- Lorenzo Marcon

---

ellipsis（省略号）CSS属性无法用于元素，因为你试图将其用于元素而非文本。 - Neil

你可以做的一件事是给 .inner 类的属性设置 flex-wrap: wrap。 - Harshal Carpenter

“display:flex” 不是一个块级容器；它是一个伸缩容器，这并不意外。 - Alohci

Answer 1

您的布局存在一些问题：

1. text-overflow: ellipsis 仅适用于 display: block 和 display: inline-block 容器。它失败是因为您将 .inner 设为 display:flex。

2. text-overflow: ellipsis 必须在同一声明中包括 white-space: nowrap。这在您的 .inner 规则中缺失。

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

尝试这个：

* {
  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>

关于text-overflow: ellipsis的更多信息，请参考这里：将多行文本截断并显示省略号

- Michael Benjamin

Answer 2

一个很好的例子是使用min-width: 0;，它可以正常工作：https://css-tricks.com/flexbox-truncated-text/

但是：

如果要截断的文本在a标签内部，则必须将该a标签包装在h2或p中。否则，由于a标签的存在，文本将无法被截断！

因此，这里是基于上面示例的带有a标签的工作示例：

.flex-parent {
 display: flex;
 align-items: center;
}

.long-and-truncated-with-child-corrected {
 flex: 1;
 min-width: 0;
  /* or some value */;
}

.long-and-truncated-with-child-corrected h2 {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.short-and-fixed {
 white-space: nowrap;
}

.short-and-fixed > div {
 width: 30px;
 height: 30px;
 border-radius: 10px;
 background: lightgreen;
 display: inline-block;
}

<div class="flex-parent">

      <div class="long-and-truncated-with-child-corrected">
        <h2>
          <a href="https://duckduckgo.com">333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</a>
        </h2>
    
      </div>
      <div class="long-and-truncated-with-child-corrected">
        <h2>
          <a href="https://vgn.de">
            44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444
          </a>
        </h2>
      </div>
      <div class="short-and-fixed">
        <div></div>
        <div></div>
        <div></div>
      </div>

</div>

- Juri Sinitson

Answer 3

以下是JS方法，您可以找到与按钮位置溢出的child div，并隐藏该div后的所有div，在该div后添加...。

var child = $('.child');
var btn = $('.btn');
var oW = $('.outer').innerWidth();
var w = btn.outerWidth();
var c = oW - w;
var last;

child.each(function() {
  var l = $(this).position().left + $(this).outerWidth();
  if (l > c) {
    if (last == undefined) last = $(this).index() - 1;
  }
})

$('.child:gt(' + last + ')').css('display', 'none');
$('.child:eq(' + last + ')').after(' ...')

* {
  margin: 15px 1px
}
.outer {
  border: 1px solid red;
  display: flex;
  width: 400px;
}
.inner {
  overflow: hidden;
  white-space: nowrap;
  flex: 1;
}
.child {
  border: 1px solid blue;
  display: inline-block;
}
.btn {
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

- Nenad Vracar

Answer 4

除了之前的答案之外：

如果您嵌套flex元素，则必须添加以下内容

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

到父容器中，否则溢出隐藏可能不再起作用。

在某些情况下，您需要将width: 0; 添加/替换为min-width: 0;。

- Juri Sinitson