Bert
Bos,style activity leadCopyright ©1994–2022 W3C®Privacy policy
创建于2011年3月27日;
最后更新2022年02月10日 星期四 05时40分52秒
这是一份翻译。与英文版本相比，它可能包含错误或者过时。翻译员:Samuel Chong of Chinese Translation Services through its pro bono translation services
请见索引 查看更多提示
印刷员将"点引线"称为连接表中列的点的行，例如：
点是最常见的，但您可以使用其他符号，如破折号或带箭头的实线。它们帮助在可变大小的间隙内可视地连接项目。
CSS应该很快获得可以在元素之后或之前添加的真正引线，以弥补与下一个元素的差距。但让我们来看看使用CSS Level 2来模拟它们的技巧。
下面的方法不是第一个或唯一的尝试诱骗CSS显示引线。第一个方法是因为Tantek Çelik.他的BellaMia 菜单 是早在2000年在Bella Mia餐厅晚餐时间推出的。其他的例子是由Micah Sittig和 Brett Merkey.提供。
示例的餐厅菜单被标记为列表:
<ul class=leaders> <li><span>Salmon Ravioli</span> <span>7.95</span> <li><span>Fried Calamari</span> <span>8.95</span> <li><span>Almond Prawn Cocktail</span> <span>7.95</span> <li><span>Bruschetta</span> <span>5.25</span> <li><span>Margherita Pizza</span> <span>10.95</span> </ul>
这个标记没什么特别之处。我选择了一个列表，因为餐馆菜单在语义上是一个列表. 菜单的两列必须在不同的元素， 虽然在这种情况下，它们都在SPANs里。
我们创建一个带有'：before'伪元素的点引线，并附加到LI元素。 伪元素用点填充列表项的整个宽度， 并且将SPANs放在顶部。 SPAN上的白色背景隐藏了它们后面的点，UL上的"overflow：hidden"确保点不 会延伸到列表之外:
ul.leaders {
max-width: 40em;
padding: 0;
overflow-x: hidden;
list-style: none}
ul.leaders li:before {
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "}
ul.leaders span:first-child {
padding-right: 0.33em;
background: white}
ul.leaders span + span {
float: right;
padding-left: 0.33em;
background: white}
我使用任意的80点，这足以填充约38em，即是在列表上的最大宽度。'：before'的宽度为零，因此它有效地 不使用空格，而其他内容将结束在点的顶部。
'padding：0'和'list-style：none'只是为了抑制列表的默认样式: 我选择将菜单标记为列表， 但我不想要项目之前的项目符号。
将点附加到列表项而不是附加到一个SPANs的其中一个优点是，这样所有点都垂直地排列。 如果你有几个相邻的行与点引线，这通常是一个所需的效果。
这里是一些变动和与引线的不同符号。第一个用了中间点而非全停。这种样式规则是完全一样的，只有生成的文本有"::"而不是 "."：
项目符号跟中间点很像，不过比较大:
用冒号:
这个引线有彩色加号，它们之间没有空格：
最后的变动是挺不一样的。引线是一个箭头，他的挑战不是让符号垂直排列，而是把箭头放在间隙的末端。因为那个原因，引线不是 附加到列表项，而是附加到价格的元素。看看这个页面的源头，看看它是怎么做的。
那如果在点引线前的文本长得变了几行呢？在这种情况下，点的行必须较低，不是在文本的第一行后面， 而是在最后一行的后面。没有为CSS Level3提出的新功能，我们不能在一般情况下解决，但我们仍然可以把简单的 情况下看起来合理一点。
我们需要假设文本之后的引线是足够短的令它不会换行。然后我们不要将点附加到文本的 开头（'：before'），而是附加到结尾（'：after'），以便它们显示在文本的最后一行的后面，而不是第一行。 这是它看起来的的模样：
除了我们现在使用选择器 'ul.leaders li:after' 而非'ul.leaders li:before'之外，CSS规则都跟之前的一样。
还有一个额外的微妙之处：因为点现在逻辑地在最后一个文本之后，它们将被绘制在上而不是在它之下。 我们需要强制将该文本放在点引线之上，以使点在文本所在的位置不可见。对于这个微妙之处，CSS有'z-index'属性。它只适用于定位 的元素，所以我们需要添加两个声明。完整的规则是：
ul.leaders {
max-width: 40em;
padding: 0;
overflow-x: hidden;
list-style: none}
ul.leaders li:after {
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "}
ul.leaders span:first-child {
padding-right: 0.33em;
background: white}
ul.leaders span + span {
float: right;
padding-left: 0.33em;
background: white;
position: relative;
z-index: 1}
在CSS Level 3 的点引线功能(直到2011年3月为止)还在研发中，但它最终会令以上示例更容易编写。
第一个例子简化为:
ul.leaders {
padding: 0;
list-style: none}
ul.leaders span:first-child:after {
content: leader(dotted)}
这将自动推第二个SPAN到行的结尾，所以没有必要使它浮动。
`Dotted' 是一个预定义关键词。但任何符号都可以放在引号中，比如说 "leader（"::"）'表示对中间的点+空格。以下是示例，但使用建议的Level 3功能。它们还是不可能运转的 (直到2014年11月为止，只有Prince 和 PDFReactor 有已知有实验支持。)
箭头引线由"水平线延伸"字符（\ 23AF）和箭头（\ 2192）组成。他们不会在所有字体排列，但他们在符号字体排列。 但是，在箭头之前可能有一个空隙，因为目前的草案还没有解释 如何将引线排在右边。（我们在这里使用了一个hack：把一些字母间距调成负数，以帮助缩小差距，但它可能不够。）
Bert
Bos,style activity lead创建于2011年3月27日;
最后更新2022年02月10日 星期四 05时40分52秒