如何根据单词的长度向行中添加未知数量的点？

Question

我无法弄清楚如何在CSS/HTML中执行以下操作:

Word 1.................................$45
Long Word 2............................$45
Long Word even longer..................$45
small..................................$45

我不能定义每个单词有多少个点,因为个人输入的是动态的.我怎样才能使它有适量的点？

编辑:我没有使用等宽字体

Answer 1

列表怎么样:

<dl>
    <dt><span>Word 1</span></dt>
    <dd>$45</dd>

    <dt><span>Long Word 2</span></dt>
    <dd>$45</dd>

    <dt><span>ong Word even longer</span></dt>
    <dd>$45</dd>
</dl>

然后一些CSS使用伪类和一些浮点数

dl { width: 500px }
dt { float: left; width: 400px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 100px; overflow: hidden }

dt span:after { content: " ....................................................................................................." }

小提琴

还有很多其他方法可以做到这一点,重点是向没有溢出的元素添加许多点,并调整以覆盖第一个文本和第二个文本(价格)之间的空间.