html - 用线填充空白

Question

如何创建一条下划线来填充文本行末尾和 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/

Answer 1

这有点小技巧，但它有效(至少在 FF 中测试过):

http://jsfiddle.net/dVtCc/

HTML:

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

CSS:

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;
}

技巧在于虚线边框实际上跨越了整个行的底部，但是 span 的位置覆盖了它们正下方的边框。