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>

有人有更好的东西吗？

Answer 1

了解到Options (99)是您使用范围最广的事实，您可以将::after的样式更改为此：

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

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

Answer 2

我发现了@ alexander-valencia回答的类似方式...

您可以看到:after和content: 'Option (99)';每次都出现，并且适合div容器的宽度。

div {
  display: inline-block;
  background-color: red;
}

span {
  display: inline-block;
  width: 100%;
  text-align: center;
}

div:after {
  display: block;
  content: 'Options (99)';
  visibility: hidden;
  height: 0;
}

<div class="container">
<span data-min-string-width="Options (99)" style="background: blue">
  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>
</div>

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

2 个答案: