如何首先收缩大型柔韧性儿童? [英] How to shrink large flex-box children first?

问题描述

我想为Web应用程序构建面包屑控件.每当容器中的空间不足以显示所有内容时，每个flex-box子代中的文本都应被截断.问题是矮个子的孩子会随着大个子的孩子而缩小，并很快变得不可读.

I want to build a breadcrumb control for a web application. The text in each flex-box child should be truncated whenever the space in the container is not large enough to display everything. The problem is shorter children are shrinked along with larger children and become quickly unreadable.

例如3个矮个子看起来很好:

E.g. 3 short children look perfectly fine:

但是一旦一个孩子有更多的文字，一切都会缩小:

But once one child has more text everything will be shrinked:

是否有一种方法可以配置弹性框，使其将较大的子项先缩小到与较小的子项相同的大小?

理想情况下，示例应如下所示:

Ideally the example should look like this:

.container {
  display: flex;
  width: 600px;
}

.child {
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;  
} 

<div class="container">
  <div class="child">
    Link A
  </div>
  <div class="child">
    Link B
  </div>
  <div class="child">
    Link C this is a really long link with lots of text
  </div>
</div>

推荐答案

使用flexbox我猜是通过将flex: 1赋予child元素(但缺点是child项目没有 auto 宽度)-请参见下面的演示

With flexbox I guess the option is to make the flex items stretch by an equal amount by giving flex: 1 to the child element (but this has the downside that the child items do not have auto width) - see demo below:

.container {
  display: flex;
  width: 600px;
}

.child {
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid blue;
  flex: 1;
}

<div class="container">
  <div class="child">
    Link A
  </div>
  <div class="child">
    Link B
  </div>
  <div class="child">
    Link C this is a really long link with lots of text
  </div>
</div>

使用 CSS Grid layout ，您可以实现此目标轻松地:

Using CSS Grid layout, you can achieve this easily:

1. 在容器上使用display: grid.

添加grid-template-columns: repeat(3, auto)可以创建三列自动宽度

Add grid-template-columns: repeat(3, auto) to make three columns of auto width

请参见下面的演示

.container {
  display: grid; /* defines a grid container */
  grid-template-columns: repeat(3, auto); /* all three columns with auto width */
  width: 600px;
}

.child {
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid blue;
}

<div class="container">
  <div class="child">
    Link A
  </div>
  <div class="child">
    Link B
  </div>
  <div class="child">
    Link C this is a really long link with lots of text
  </div>
</div>

这篇关于如何首先收缩大型柔韧性儿童?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！