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

Question

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

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

当有足够的宽度时，该值必须紧挨着标签。

Answer 1

只需使用标准文本溢出属性并将您的 label/input 包装在 flex-div.

中

Here's a Pen with two examples.

您可以使用媒体查询来根据屏幕尺寸进行更改。请注意，这只是一个示例，您可以根据自己的具体情况做出更好的选择。

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>

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

Truncate label on smaller screens, while keeping input position on bigger screens

css

flexbox