語言

這是一份翻譯。與英文版本相比，它可能包含錯誤或者過時。翻譯員:Samuel Chong of Chinese Translation Services through its pro bono translation services

網頁樣式表CSS 提示與竅門

請見索引 查看更多提示

點引線

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

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

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裡。

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：把一些字母間距調成負數，以幫助縮小差距，但它可能不夠。）

Bert Bos,style activity lead
Copyright ©1994–2022 W3C®Privacy policy

創建於2011年3月27日;
最後更新2022年02月10日 星期四 05:40:52

語言

關於翻譯