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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。