CSS hanging-punctuation用法及代碼示例

CSS中的hanging-punctuation屬性為Web設計人員提供了網頁上某些高級印刷術。 hanging-punctuation屬性指定在某個文本行的開頭還是結尾將標點符號放置在行框之外。

本質上，它為Web設計人員提供了將項目符號或任何符號設置為左對齊或右對齊的特定對齊方式，以便第一個字母與文檔的其餘部分正確對齊。

我們可以將以下關鍵字與hanging-punctuation屬性一起使用，並且可以在不同的模式或類型中使用：

關鍵字值
兩個關鍵字值
三個關鍵字值
全局關鍵字值

用法:對於關鍵字值

ohanging-punctuation:none;
hanging-punctuation:first;
hanging-punctuation:last;
hanging-punctuation:force-end;
hanging-punctuation:allow-end;

用法:對於兩個關鍵字值

hanging-punctuation:first force-end;
hanging-punctuation:first allow-end;
hanging-punctuation:first last;
hanging-punctuation:last force-end;
hanging-punctuation:last allow-end;

用法:對於三個關鍵字值

hanging-punctuation:first force-end last;
hanging-punctuation:first allow-end last;

用法:為了全局價值

hanging-punctuation:inherit;
hanging-punctuation:initial;
hanging-punctuation:unset;

屬性值：

關鍵詞	函數性
none	這是此屬性的默認值。沒有字符掛起。
first	在元素的第一個格式化行的開頭使用可用字符會掛起。
last	元素最後格式化的行末的可用字符掛起。
force-end	在行尾使用stop或逗號掛起。
allow-end	如果在對齊之前不適合，則行尾的停止符或逗號會掛起。

例：

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            CSS Hanging Punctuation Property 
        </title> 
        <style> 
            p { 
                 hanging-punctuation:first; 
              }   
        </style> 
    </head> 
      
    <body> 
        <p>“GeeksforGeeks:A computer science portal”</p> 
    </body> 
</html>

輸出：

瀏覽器：hanging-punctuation屬性支持的瀏覽器如下所示：

Safari 10.0以上

相關用法

注：本文由純淨天空篩選整理自motamarriphani大神的英文原創作品 CSS | hanging-punctuation Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。