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

Question

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

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

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

Answer 1

只需使用标准的文本溢出属性并将您的标签/输入包装在 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;
}