关于字体行高、下划线、滚动条、文本阴影的设置

最新推荐文章于 2022-08-20 22:50:47 发布

xuehyunyu

最新推荐文章于 2022-08-20 22:50:47 发布

阅读量1k

点赞数 1

文章标签： CSS html text-align overflow text-decoration

本文链接：https://blog.csdn.net/xuehyunyu/article/details/72773457

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p{
            color: red;
            font-size: 30px;
            line-height: 50px;/*行高：单行字体占用的高度*/
            text-align: left;/*字体的对齐方式: 1、justify两端对齐，
                                               2、left/start左对齐(默认)
                                               3、right/end：右对齐
                                               4、center:居中对齐*/
            letter-spacing: normal;/*字符间距：px、normal*/
            text-decoration: underline;   /*文本修饰：1、line-through删除线
                                                    2、underline下划线
                                                    3、overline上划线
                                                    4、none无修饰*/
            overflow: hidden;/*1、auto自动处理：加滚动条
                               2、hidden：超出的部分隐藏
                               3、scroll：加一个滚动条*/
            /*white-space: nowrap;*//*不换行*/
            text-overflow: ellipsis;/*文本超出范围的显示方式(需配合overflow、white-space使用)：1、clip：文字超出的部分隐藏
                                                      2、ellipsis:隐藏的内容显示...*/
            /*text-shadow: 2px 2px blue;*/ /*文本阴影: x方向的偏移 y方向的偏移 阴影的颜色*/
            -webkit-text-stroke: 1px yellow; /*文本描边颜色：描边的宽度 描边的颜色*/
            text-indent: 2em;/*文本缩进:缩进2em倍的字符大小，em是相对大小*/


        }
    </style>
    <title>行距和对齐方式</title>
</head>
<body>
<p>
    下载全新星巴克中国官方APP，开启更便捷的星巴克体验
    下载全新星巴克中国官方APP，开启更便捷的星巴克体验
    下载全新星巴克中国官方APP，开启更便捷的星巴克体验
    下载全新星巴克中国官方APP，开启更便捷的星巴克体验
    下载全新星巴克中国官方APP，开启更便捷的星巴克体验
</p>
<p>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p>
</body>
</html>

运行的结果为：

xuehyunyu

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于字体行高、下划线、滚动条、文本阴影的设置

p{ color: red; font-size: 30px; line-height: 50px;/*行高：单行字体占用的高度*/ text-align: left;/*字体的对齐方式: 1、justify两端对齐，
复制链接

扫一扫