CSS 前导省略号

Question

有没有办法使用 CSS 完成前导省略号？就像在目录中一样，部分标题后跟省略号，直到页面右侧显示的页码。

像这样:

(显示轮廓以识别不同的元素。)

Answer 1

这是一个只有 float 元素/溢出的粗略示例:http://jsfiddle.net/8Ngv5/

如果你能固定所有元素的宽度，那就不那么粗糙了。

这是一个更优雅的例子:http://jsfiddle.net/8Ngv5/2/

这个使用:before 伪类来注入(inject)一个长字符串，然后被左边的元素覆盖。左边的元素必须位于线条上方，并且需要一个背景来覆盖线条(参见 CSS)。

这适用于 IE9、Chrome 和 Firefox。

结果

HTML

<div class="left">Hello</div>
<div class="right">World</div>
<br>
<div class="left">Another Line</div>
<div class="right">With Longer Content</div>
<br>
<div class="left">Another Line 2</div>
<div class="right">2 With Longer Content</div>

CSS

BODY {
    line-height: 1.2em;    
}

.left {
 float: left; 
 position: relative;
 top: 1.2em;
 background-color: #fff;
}

.right:before {
    content: "...............................................................................................................................................................................................................................................................................................................................................................................................................................";
}

.right {
    float: right;
    white-space: nowrap;
    text-align: right;
}