html - 标签 : Including a symbol, `:` ，使用伪元素 `::after` ，在元素的右侧

Question

我正在尝试在 HTML/CSS 中设置一个类似表单的布局来显示 JSON 数据。我希望标签左对齐，在右侧有一个冒号，如果元素变小而无法正确显示，则省略它们包含的文本。

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

虽然我有一个有效的实现，但我想知道是否有任何方法可以去除我的 HTML 和 CSS 中额外的 span 元素？

最小工作示例:

目前我的策略是将文本包装在 span 中，并将其包装在类设置为 label 的 div 中。在 span 上启用省略号，它被设置为填充大部分包含 div 的部分，减去符号右侧的一些空间；冒号，:，在本例中。 div 使用伪元素 ::after 附加符号。最后，将 display 设置为 flex 并将 justify-content 设置为 space-between 以填充 之间的水平空间code>span 和符号。

    div {
     border  : 1px solid blue;
     outline : 1px solid invert;
     }
    div.label {
      /* Dimensions */
      width           :             20%;
      border-radius   :             5px;
      padding         : 3px 3px 3px 3px;
      /* Behaviour */
      clear           :            left;
      float           :            left;
      display         :            flex;
      justify-content :   space-between;
      /* Style */
      font-weight    :            bold;
    }
    div.label span {
      /* Dimensions */
      width : /* fallback */ 95%;
      width :  calc(100% - 10px); 
      /* Alternatively : margin : 0px 10px 0px 0px; */
      /* Behaviour */
      /* - Enable text-overflow */
      white-space   : nowrap;
      overflow      : hidden;
      /* Style */
      /* - Format text-overflow */
      text-overflow : ellipsis;
    }
    div.label:after {
      /* Contents */
      content   :   ":";
    }
    div.value {
      /* Dimensions */
      border-radius: 5px;
      padding :   3px;
      /* Behaviour */
      float   :  left;
    }

<article>
  <div class="label"><span>Short label</span></div>
  <div class="value">Short string</div>
  <div class="label"><span>A very long label</span></div>
  <div class="value">A very long string, so long in fact that it will have to wrap more then one line, possibly even more if you have a sufficiently small screen</div>
</article>

(我用谷歌搜索了一些，但我似乎找不到比我的实现更好的示例，特别是 SO 似乎没有相关的问题/答案)

Answer 1

您可以将 position:absolute 与伪元素一起使用，您将能够摆脱额外的 span，因为您可以移动应用于 span 到 div

div {
  border: 1px solid blue;
  outline: 1px solid invert;
}

div.label {
  width: 20%;
  border-radius: 5px;
  padding: 3px 13px 3px 3px;
  clear: left;
  float: left;
   white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  box-sizing:border-box;
  position:relative;
}


div.label:after {
  content: ":";
  position:absolute;
  right:3px;
}

div.value {
  /* Dimensions */
  border-radius: 5px;
  padding: 3px;
  /* Behaviour */
  float: left;
}

<article>
  <div class="label">Short label</div>
  <div class="value">Short string</div>
  <div class="label">A very long label</div>
  <div class="value">A very long string, so long in fact that it will have to wrap more then one line, possibly even more if you have a sufficiently small screen</div>
</article>