在较小的屏幕上截断标签，同时在较大的屏幕上保持输入位置

Question

我需要实现下图中显示的示例，最好使用flexbox。

问题是图像上的值0应始终可见，而标签可能会在较小的屏幕上被...截断。

当宽度足够时，该值必须仍然在标签旁边。

Answer 1

只需使用标准的文本溢出属性，并将标签/输入包装在flex-div中。

Here's a Pen with two examples.

您可以使用媒体查询根据屏幕尺寸更改此设置。请注意，这只是一个例子，您可以根据具体情况使用make。

<强> HTML

<div>
  <label for="value">Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label:</label>
  <input type="text" id="value" name="value" placeholder="0">
  <button type="submit">OK</button>
</div>

<强> CSS

div {
  display: flex;
}
label {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  display: inline-block;
}

Answer 2

我的解决方案：

.flex {
  flex: 1 1 0%;
}

.column {
  flex-direction: column;
  display: flex;
}


.row {
  flex-direction: row;
  display: flex;
  background: #f3f5f7;
}

.large {
  width: 400px;
}

.small {
  width: 100px;
}

label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


div > * {
  padding: 4px;
}

<div class="column">

<div class="row large">
  <label>
    loooooong label:
  </label>
  <span>100</span>
  <span class="flex"></span>
  <span>></span>
</div>
  
<div class="flex row small">
  <label>
    loooooong label:
  </label>
  <span>100</span>
  <span class="flex"></span>
  <span>></span>
</div>
  
</div>