语言

这是一份翻译。 与 英文版本 相比,它可能包含错误或者过时。 翻译员:Samuel Chong of Chinese Translation Services through its pro bono translation services

网页样式表 CSS 提示与窍门

请见索引 查看更多提示

点引线

印刷员将"点引线"称为连接表中列的点的行,例如:

点是最常见的,但您可以使用其他符号,如破折号或 带箭头的实线。它们帮助在可变大小的间隙内可视地连接项目。

CSS应该很快获得可以在元素之后或之前添加的 真正引线, 以弥补与下一个元素的差距。但让我们来看看使用 CSS Level 2来模拟它们的技巧。

下面的方法不是第一个或唯一的尝试诱骗CSS显示引线。 第一个方法是因为Tantek Çelik. 他的Bella Mia 菜单 是早在2000年在Bella Mia餐厅晚餐时间推出的。 其他的例子是由Micah SittigBrett 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里。

CSS规则

我们创建一个带有':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'),以便它们显示 在文本的最后一行的后面,而不是第一行。 这是它看起来的的模样:

CSS 冗长文本的规则

除了我们现在使用选择器 '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}

Level 3 的 点引线

在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月为止,只有PrincePDFReactor 有 已知有实验支持。)

箭头引线由"水平线延伸"字符(\ 23AF)和箭头(\ 2192)组成。 他们不会在所有字体排列,但他们在符号字体排列。 但是,在箭头之前可能有一个空隙,因为目前的草案还没有解释 如何将引线排在右边。 (我们在这里使用了一个hack:把一些字母间距调成负数, 以帮助缩小差距,但它可能不够。)

Bert Bos, style activity lead
Copyright © 1994–2018 W3C®

创建于2011年3月27日;
最后更新 2018年01月12日 星期五 20时13分26秒

语言

关于翻译