在这种情况下如何让虚线一直穿过底部

Question

我正在网站上工作，而不是一个全职的前端开发者。有一块我们试图将省略号扩展到价格。

但是，有很多项目，所以价格宽度必须反映最大的价格。

像这样：

here is some detail for you............... 12.50

有问题的页面在这里：

http://www.lucques.com/tmp_wine.html

如何让虚线与价格齐平？也许我可以让价格变宽，但不能换成多行。

Answer 1

这是一种不优雅的方法 - FIDDLE。

1. 获取描述宽度

2. 获取价格宽度

3. 获取持有人div的宽度

4. 从持有人div中扣除价格和描述。

5. 将固定数量的句点移动到点div并将其大小设置为上面＃4中的剩余大小。

6. 溢出：隐藏会限制点的长度。

JS

var descriptionwidth = $('.description').width();
var pricewidth = $('.price').width();
var dotswidth = 500 - ( descriptionwidth + pricewidth );

$('.putmehere').html("Desc: " + descriptionwidth + 
                     " Dots: " + dotswidth + 
                     " Price : " + pricewidth);

$('.dots').append('..................................................................................................................................................');
$('.dots').css({'display': 'inline-block',
                'width': dotswidth + 'px'
                 });