文本溢出：省略号和 flex

Question

我有一个带有display: flex 属性集的容器元素。 一个孩子有固定宽度（flex: 0 0 auto），另一个没有（flex: 1）。灵活的孩子还有一些其他的孩子：我希望这个容器（inner）根据父宽度剪辑它的孩子。

我设法做到了这一点，但我也希望 ellipsis 溢出，以防内容被剪辑（孩子的数量不固定）。

这是我目前的代码：

.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

我怎样才能得到以下期望的结果？ （欢迎黑客攻击 - 请仅使用 css！）

Answer 1

除了上一个答案：

如果你嵌套了弹性元素，那么你必须添加

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

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

在某些情况下，您需要width: 0; 来补充/代替min-width: 0;。

Answer 2

min-width: 0; 的一个很好的例子：https://css-tricks.com/flexbox-truncated-text/

但是：

如果您要转录的文本在 a-tag 内，则您必须包装该 a-tag，例如h2 或 p。否则文本不会因为a-tag而被截断！

以下是基于上述示例的带有 a-tag 的工作示例：

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

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>

Answer 4

您的布局存在一些问题：

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的信息在这里：Applying an ellipsis to multiline text