时间戳

首页 > 解决方案 > 带截断的 Flexbox 自适应宽度

css - 带截断的 Flexbox 自适应宽度

问题描述

我正在尝试创建一个包含两个长度差异很大的字符串项的 flexbox 行，当字符串不适合时，它会用省略号截断。

看起来很简单，并且可以正常工作：

.flex-parent {
  display: flex;
}

.flex-child {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 50%;
}

但是，有时字符串会很短，例如“N/A”，在这种情况下，我希望这对字符串中的另一个字符串尽可能多地占用空间，这将超过 max-width: 50%。

包含 50% 的最大宽度是为了防止非常长的字符串以与非常短的字符串相同的速率收缩。即，没有它，它会像这样截断： N/... 一个很长的字符串，包含很多单词...

相反，理想的行为是当两个字符串都长于父容器的一半时，它们占用相等的空间。但是，当一个字符串短于 50% 时，会显示整个字符串，而另一个字符串会占用所有剩余空间。

因为行为取决于父级大小和自身字符串的长度以及其他字符串的长度，所以所有内置的 flex-basis、flex-grow/flex-shrink 似乎都没有帮助。

http://jsfiddle.net/ods1zpjy/

以前有人解决过这个吗？

标签： cssflexboxdynamic-sizing

解决方案

推荐阅读