語言

這是一份翻譯。 與 英文版本 相比,它可能包含錯誤或者過時。 翻譯員: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® Privacy policy

創建於2011年3月27日;
最後更新 2018年09月26日 星期三 04:41:20

語言

關於翻譯