Html 标签：包括符号“：”，使用psuedo元素“：”after”，位于元素的右侧

我正在尝试在HTML/CSS中设置一个类似表单的布局来显示JSON数据。我希望标签是左对齐的，在右边有一个冒号，如果元素变小，则删除它们包含的文本以正确显示所有内容

long label  :
long label :
long l... :

虽然我有一个工作的实现，但我想知道有没有什么方法可以在我的HTML和CSS中去掉额外的span元素

最低工作示例： 目前，我的策略是将文本包装在一个范围内，并将其包装在一个类设置为label的div中。在跨度上启用省略号，并将其设置为填充大部分包含div，减去符号右侧的一些空间；冒号，在本例中为：。div使用psuedo元素：：after追加符号。最后，将“显示”设置为“将内容调整并对齐到间距”，以填充跨距和符号之间的水平间距

div{ 边框：1px纯蓝色； 外形：1px实心内底； } 分区标签{ /*尺寸*/ 宽度：20%； 边界半径：5px； 填充：3px 3px 3px 3px； /*行为*/ 清除：左； 浮动：左； 显示器：flex； 证明内容：之间的空间； /*风格*/ 字体大小：粗体； } div.label span{ /*尺寸*/ 宽度：/*回退*/95%； 宽度：calc100%-10px； /*或者：保证金：0px 10px 0px 0px*/ /*行为*/ /*-启用文本溢出*/ 空白：nowrap； 溢出：隐藏； /*风格*/ /*-格式文本溢出*/ 文本溢出：省略号； } 分区标签：在{ /*内容*/ 内容：：； } 分区值{ /*尺寸*/ 边界半径：5px； 填充：3倍； /*行为*/ 浮动：左； } 短标签 短线 很长的标签 一个很长的字符串，实际上很长，它将不得不包装多行，如果你有一个足够小的屏幕，可能甚至更多 可以将position:absolute与伪元素一起使用，这样就可以去掉额外的span，因为可以将span上应用的所有属性移动到div

div{ 边框：1px纯蓝色； 外形：1px实心内底； } 分区标签{ 宽度：20%； 边界半径：5px； 填充：3px13px 3px； 清除：左； 浮动：左； 空白：nowrap； 溢出：隐藏； 文本溢出：省略号； 字体大小：粗体； 框大小：边框框； 位置：相对位置； } 分区标签：在{ 内容：：； 位置：绝对位置； 右：3px； } 分区值{ /*尺寸*/ 边界半径：5px； 填充：3倍； /*行为*/ 浮动：左； } 短标签 短线 很长的标签 一个很长的字符串，实际上很长，它将不得不包装多行，如果你有一个足够小的屏幕，可能甚至更多

---

谢谢，我曾经尝试过类似的方法，但没能成功。