html – 用一行填写空格

如何创建一个下划线,填充文本行末尾和DIV宽度结束之间的空白区域.

我正在尝试以下方法：

我希望当屏幕变小时,产品线会中断.我希望价格保持在右边,并加下划线.最后一个单词(Mayo)和价格之间的空格必须自动填充下划线.

大屏幕：
老奶酪 – 沙拉,牛油果,鸡蛋,草药梅奥…………………. 500

较小的屏幕：
老奶酪 – 沙拉,
草药梅奥…………………………………… 500

超小屏幕：
老奶酪 – 沙拉,鳄梨,
鸡蛋,草药梅奥……………………… 500

我有以下标记：

HTML

<div class="productline">
  <div class="product">
    Old Cheese – Salad,Avocado,Egg,Herbal Mayo
  </div>
  <div class="line">&nbsp</div>
  <div class="price">500</div>
</div>

CSS

.productline {
    width:300px;
}
.product {
    display:table-cell;    
    white-space: nowrap;
}
.line {
    border-bottom: 1px solid black;
    display: table-cell;
    width:100%;
}
.price {
    border-bottom:1px solid black;
    display: table-cell;
    white-space: nowrap;
    vertical-align:bottom;
}

例

http://jsfiddle.net/florisvl/zV6Yd/

固定

http://jsfiddle.net/florisvl/3b7Tr/

<table>
    <tr>
        <td>
            <span>
                Old Cheese – Salad,Herbal Mayo
            </span>
        </td>
        <td class="price">
            <span>
                500
            </span>
        </td>
    </tr>
</table>

table{
    border-collapse: collapse;
    width: 100%;
}

td{
    border-bottom: 3px dotted black;
    vertical-align: bottom;
    padding: 0;
}

td.price{
    text-align: right;
}

td > span{
    BACkground-color: white;
    position: relative;
    bottom: -5px;
}