下面是使用flexbox的解决方案，它跨越了标题和价格之间的任意距离

.table_of_contents {
    display:flex;
    div:first-child{
        flex:0 1 auto;
    }
    .dot{
        border-bottom: dotted 3px orange;
        height: 12px;
        margin: 0 5px 5px 5px;
        flex: 1 1 auto;
    }    
    div:last-child {
        display:flex;
        flex-direction:row;
        flex: 0 1 auto;
    }
}

您可以使用以下代码生成行：

#helper{

    width:200px;
    border: 1px dashed orange;
}

来源：http://jsfiddle.net/2j9BN/

您可以使用css来实现这一点。
如果你只加

border: thick dotted;

到css的适当部分。这将在应用它的整个元素周围创建一个虚线边框。如果你只想在元素下面有点，那么用途：

border-bottom: thick dotted;

如果您想要不同的大小，也可以使用think dotted或just dotted。
然后可以添加橙子以获得颜色：

border-bottom: thick dotted orange;

希望这对你有帮助：）

我想你应该这样寻找：

• • html格式**

<div>
    <div>Marinated Olives</div>
    <div class="dot"></div>
    <div>4.00E</div>   
</div>

• • css**

.dot{
    border-bottom: dotted 3px orange;
    width: 100px;
    float: left;
    position: relative;
    display: block;
    height: 12px;
    margin: 0 5px 0 5px;
}

div:first-child, div:last-child{
    float:left;
}

fiddle
您可以玩宽度调整在您喜欢的。
另一种使用css :after的方法

• • html格式**

<div>
    <div id="dotted">Marinated Olives</div>   
    <div>4.00E</div>   
</div>

• • css**

div{
    float:left;
}

#dotted::after{
    content: "..................";
    letter-spacing: 4px;
    font-size: 18px;
    color:orange;
    margin-left:20px;
}

fiddle
在这里你可以玩内容和字母间距。希望它有帮助：）

第一个

使用一个绝对定位的div？段落的白色背景？对任何长度的menu-item-name都有效。试试看吧，祝你好运！

<div class='item_wrapper'>
    <p class='item_name'>Marinated olives</p>
    <p class='item_price'>4,00€</p>
    <div class='dotted_line'></div>
</div>

.item_wrapper{
    width:100%;
    clear: both;
}
.dotted_line{
    border-top:dotted 2px orange;
    position:relative;
    width:100%;
    top:33px;
    z-index:-1;
}
p{
    position:relative;
    background:white;
    padding:0px 10px;
}
.item_name{
    float:left;
}
.item_price{
    float:right;
}

http://jsfiddle.net/MrgBM/

像这样的东西吗
第一个
JsFiddle