如何在带有许多 Space 个字符的标签附近添加“:”字符

Question

我想创建如下表格：

abc         :
abcdefg     :

'abc' 有 3 个字符。 'abc :' 是 20 个字符。所以 space 应该有 17 个字符。 'abcdefg' 有 7 个字符。 'abcdefg :' 是 20 个字符。所以 space 应该有 13 个字符。我不想添加 space 和字符。

 <label class="col-sm-3 col-form-label col-form-label-lg">abc<span style="padding-left:17px;">:</span></label>

<label class="col-sm-3 col-form-label col-form-label-lg">abcdefg<span style="padding-left:13px;">:</span></label>

以上代码不正确，因为 'px' 不等于一个字符 space。

我不想写如下代码:

 <label class="col-sm-3 col-form-label col-form-label-lg">abc &nbsp &nbsp &nbsp...:</label>

如何使用填充样式添加多个字符 space？例如，我可以编写 js 函数来使用 $nbsp 添加多个 space 字符吗？如下：

function AddMultiCharacterSpace(charCount){ ... }

Answer 1

如果你可以给你的标签一个宽度，你可以尝试使用 pseudo-element:

label {
  position: relative;
  display: block;
  width: 100px;
}
label::after {
  content: ':';
  position: absolute;
  top: 0;
  right: 0;
}

<label>abc</label>

<label>abcdefg</label>

CODEPEN

Answer 2

label {
 width: 100px;
 display: flex;
 justify-content: space-between;
}

<label class="col-sm-3 col-form-label col-form-label-lg">
 <span>abc</span>
 <span>:</span>
</label>
<label class="col-sm-3 col-form-label col-form-label-lg">
 <span>abcdefg</span>
 <span>:</span>
</label>

p.s。只需为标签选择所需的宽度。

Answer 3

你可以这样做。

对于您的 label 元素，设置 display: inline-block（例如，block 也可能是一个选项）。

您还需要指定宽度值。

放置:字符，可以使用:after伪元素，向右浮动

label {
  width: 100px;
  display: inline-block;
}
label:after {
  content: ':';
  float: right;
}

<label>abc</label><br>
<label>abcdfgh</label>

如何在带有许多 Space 个字符的标签附近添加“:”字符

How To Add ':' Character Near My Label With Many Space Character

html

css

spaces

padding

special-characters