網頁樣式表 CSS 提示與竅門

請見索引 查看更多提示

點引線

印刷員將"點引線"稱為連接表中列的點的行，例如：

點是最常見的，但您可以使用其他符號，如破折號或 帶箭頭的實線。它們幫助在可變大小的間隙內可視地連接專案。

CSS應該很快獲得可以在元素之後或之前添加的 真正引線， 以彌補與下一個元素的差距。但讓我們來看看使用 CSS Level 2來模擬它們的技巧。

下面的方法不是第一個或唯一的嘗試誘騙CSS顯示引線。 第一個方法是因為Tantek Çelik. 他的Bella Mia 菜單 是早在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裡。

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月為止，只有Prince 和 PDFReactor 有 已知有實驗支援。)

箭頭引線由"水平線延伸"字元（\ 23AF）和箭頭（\ 2192）組成。 他們不會在所有字體排列，但他們在符號字體排列。 但是，在箭頭之前可能有一個空隙，因為目前的草案還沒有解釋 如何將引線排在右邊。 （我們在這裡使用了一個hack：把一些字母間距調成負數， 以幫助縮小差距，但它可能不夠。）

創建於2011年3月27日;
最後更新