相关疑难解决方法(0)

我有一个列表的以下布局.每个列表项由两列表示.第二列应占用所有可用空间,但如果第一列占用太多空间,则应以最小大小固定在右侧.然后第一列应显示省略号.

问题出现在最后一个案例中.当第一列包含太多文本而不是显示省略号时,它会将自身伸展到弹性框之外,从而导致出现水平滚动条,而第二列不会固定在右侧.

我希望它像这样呈现(模型):

我怎样才能做到这一点？

这是 样本小提琴.

.container {
    display: -webkit-flex;
}

div {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.container > div:last-child {
    -webkit-flex: 1;
    background: red;
}

<!-- a small first column; the second column is taking up space as expected -->
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<!-- a large first column; the first column is overflowing out of the flexbox container -->
<div class="container">
    <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo barfoo barfoo …

我们大量使用flexbox用于桌面应用程序,例如查看Web应用程序,它一直很好用.

但是使用最新的Firefox Developer Edition(35.0a2),布局的行为并不像预期的那样(它超出了视口):http://tinyurl.com/k6a8jde

这在Firefox 33.1中运行良好.

我认为这与此处描述的flexbox更改有关:https: //developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility

但遗憾的是,我还无法找到在FF 34或35.x中获得FF 33.x行为的方法.

有关布局或如何更好地隔离问题的任何帮助表示赞赏.

我有一个div，它是一个包装器，里面有一些孩子div。我正在使用flexbox将它们放置在彼此下方。现在，子 div 有一个文本。文本与 垂直对齐align-items: center;。子 div 的宽度取决于它的文本。当文本与包装器一样长时，div 应该停止增长并且里面的文本应该被剪掉。为此，我尝试使用text-overflow: ellipsis;. 它没有按预期工作。我知道我可以display: inline-block;在 的情况下使用flexbox，但我想使用flexbox来对齐文本，text-overflow: ellipsis;但它似乎不适用于我的示例。目前，长文本项与包装器重叠，也没有省略号。该项目具有固定高度。

我为这个主题找到的唯一答案是这个，但答案对我没有帮助：Ellipsis in flexbox container

希望它足够清楚。

.wrapper {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  padding: 10px;
  flex-wrap: wrap;
}

.wrapper__item {
  min-width: 0;
  flex-basis: 50%;
  align-self: flex-start;
  flex-direction: row;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: …

我目前面临以下情况：

<div class="row no-gutters">
    <div class="col"></div>
    <div class="col col-auto"></div>
</div>

因此，第一列将占用第二列未填充的可用空间

即[| -------- column1 -------- | | column2 | ]

我的问题是里面的内容column1的宽度大于包含行的宽度。发生的是，不是column1缩小以仍然使两列都适合同一行行，而是column1像填满整个行一样填充整个行col-12并column2下降到新行，从而包装了列。

有没有办法防止这种行为，并始终将两列保持在同一行？