javascript - 将元素大小调整为不是内容的字符串

Question

我有一个按钮 ( <span>)，其中包含格式文本Options (3)。数字可以改变，最坏的情况是Options (99).

有没有办法根据我最坏的情况调整这个跨度的最小宽度，这样布局在数字改变时不会改变？

我目前的做法是

span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

span::after {
  display: inline-block;
  white-space: pre;
  height: 0;
  visibility: hidden;
  content: attr(data-min-string-width);
}

<span data-min-string-width="Options (99)" style="background: red">
  Options
</span>
<br>
<span data-min-string-width="Options (99)" style="background: lime">
  Options (1)
</span>
<br>
<span data-min-string-width="Options (99)" style="background: cyan">
  Options (99)
</span>

有人有更好的吗？

标签： javascripthtmlcss

Answer 1

知道你的跨度最大的事实，Options (99)你可以改变你的::after风格：

span::after {
    color: transparent;
    content: 'Options (99)';
    height: 0;
    visibility: hidden;
}

这将确保“选项 (99)”始终构成跨度的宽度。