Question

我正在尝试在HTML / CSS中设置类似于表单的布局以显示JSON数据。我希望标签保持左对齐，如果元素变小以正确显示所有元素，则在右边加冒号，并消除其中包含的文本。

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

虽然我有一个可行的实现，但我想知道它是否有办法摆脱HTML和CSS中多余的span元素？

最小工作示例：

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

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;
    }

（我曾在Google上搜索过一些示例，但似乎找不到比我的实现更好的示例，尤其是SO似乎没有相关的问题/答案）

Answer 1

您可以将position:absolute与伪元素一起使用，并且可以将多余的span移出，因为您可以将span上应用的所有属性移到{{ 1}}

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;
}

标签：在元素的右侧使用伪元素（:: after）包含符号“：”

最小工作示例：

1 个答案: