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

如何获得以下所需结果？（黑客欢迎 - 请css取悦！）

Answer 1

您的布局存在一些问题：

text-overflow: ellipsis仅适用于display: block和display: inline-block容器。它失败了，因为您将.inner设置为display: flex。
text-overflow: ellipsis必须在同一声明中包含white-space: nowrap。您的.inner规则中缺少该内容。
省略号适用于文本，而不适用于块级元素

试试这个：

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

Answer 2

这是JS方法，你可以在其中找到哪个child div的位置溢出按钮的位置，并隐藏该div之后的所有div并在该div之后附加...。

＆＃13;

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(' ...')

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

但是：

如果要翻译的文本位于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 4

除了上一个答案：

如果嵌套弹性元素，则必须添加

def _verify_json_file(self, result, exp): ''' Verifies if two json files are different ''' with open(exp) as json_data: data = re.sub(ID, ID_REP, json_data.read()) expected = JSON.loads(data) differences = jsondiff.diff(expected, result, syntax='explicit') if not differences : return True if differences == expected or differences == result: raise AssertionError("ERROR! Jsons have different structure") return False

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

在某些情况下，除了/代替white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，您还需要width: 0;。

文本溢出：省略号和弹性

4 个答案: