根据特定规则提取元素

Question

我尝试设置灵活方框，使代码片段中的块的排列方式与图片中的方式相同。

主要假设是：

• 如果两个块都填充了大量文本，则它们的宽度比例为50％。

• 如果文字很少，则不会延伸到包装的整个宽度。

我怎么能这样做，是否可以只使用css？

.wrapper {
    width: 200px;
    height: 50px;
    background: beige;
    margin-bottom: 20px;
}

.block{
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    height: 50px;
    float: left;
}

.block.l{
    background: blue;
}

.block.r{
    background: red;
}

<div class="wrapper">
  <div class="block l">
      short
  </div>
  
    <div class="block r">
      short
  </div>
</div>

<div class="wrapper">
  <div class="block l">
      long text long text long text long text long text long text long text
  </div>
  
    <div class="block r">
      short
  </div>
</div>

<div class="wrapper">
  <div class="block l">
      long text long text long text long text long text long text long text
  </div>
  
    <div class="block r">
      long text long text long text long text long text long text long text
  </div>
</div>

Answer 1

这需要将display: flex添加到包装元素以允许弹性框工作。

如果您还向min-width添加.block，还可以确保块的一侧不会太小。

没有使用某些脚本就没有完美的案例。

＆＃13;

＆＃13;

.wrapper {
width: 300px;
    height: 50px;
    background: beige;
    margin-bottom: 20px;
    display: flex;
}

.block{
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    height: 50px;
    float: left;
    display: flex;
    min-width: 35px
}

.block.l{
    background: blue;
}

.block.r{
    background: red;
}

＆＃13;

<div class="wrapper">
  <div class="block l">
      short
  </div>
  
    <div class="block r">
      short
  </div>
</div>

<div class="wrapper">
  <div class="block l">
      long text long text long text long text long text long text long text
  </div>
  
    <div class="block r">
      short
  </div>
</div>

<div class="wrapper">
  <div class="block l">
      long text long text long text long text long text long text long text
  </div>
  
    <div class="block r">
      long text long text long text long text long text long text long text
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;