【CSS】文本外观属性

最新推荐文章于 2024-01-10 22:17:49 发布

赤焰梦

最新推荐文章于 2024-01-10 22:17:49 发布

阅读量211

点赞数

分类专栏： HTML/CSS/Javascript 文章标签： css 前端

本文链接：https://blog.csdn.net/m0_49442965/article/details/127731953

版权

HTML/CSS/Javascript 专栏收录该内容

58 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本外观属性</title>
</head>
<style>
    .knowledge{word-wrap: break-word;border: 4px solid pink;margin-left: 20px;width:1300px; height: 60px;font-size: 18px;font-weight: bold;}
</style>
<body>
    <div class="knowledge">
    color：文本颜色&nbsp;&nbsp;&nbsp;
    letter-spacing：字间距&nbsp;&nbsp;&nbsp;
    word-spacing:单词间距&nbsp;&nbsp;&nbsp;
    line-height：行间距&nbsp;&nbsp;&nbsp;
    text-transform：文本转换&nbsp;&nbsp;&nbsp;
    text-decoration:文本装饰&nbsp;&nbsp;&nbsp;
    text-align:水平对齐方式&nbsp;&nbsp;&nbsp;
    text-indent:首行缩进&nbsp;&nbsp;&nbsp;
    white-space:空白符处理&nbsp;&nbsp;&nbsp;
    text-shadow:阴影效果&nbsp;&nbsp;&nbsp;
    text-overflow：标示对象内溢出文本</div>
<p style="letter-spacing: 12px; line-height: 2px;">测试一下字间距和行间距</p>
<p style="word-spacing: 31px;">单词间距：hello world</p>
<p style="text-transform: capitalize;">首字母大写：hello world</p>
<p style="text-decoration:underline;">下划线</p>
<p style="text-decoration:overline;">上划线</p>
<p style="text-decoration: line-through;">删除线</p>
<p style="text-align: left;">左对齐</p>
<p style="text-align: right;">右对齐</p>
<p style="text-align: center;">居中对齐</p>
<p style="text-indent: 39px;">首行缩进</p>
<p style="white-space: pre;">这个段落          有       空格</p>
<p style="white-space: nowrap;">这个段落          有       空格,空格无效,超出浏览器自动增加滚动条空格无效,超出浏览器自动增加滚动条
    空格无效,超出浏览器自动增加滚动条
    空格无效,超出浏览器自动增加滚动条空格无效,超出浏览器自动增加滚动条空格无效,超出浏览器自动增加滚动条</p>
<p style="text-shadow: 20px 20px 20px cornflowerblue;font-size: 50px;"><strong>阴影效果</strong></p>
<p style="text-shadow: 20px 20px 20px red,20px 20px 20px rebeccapurple;font-size: 50px;"><strong>阴影叠加效果</strong></p>
<p style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width: 320px;height:100px;border: 1px solid beige;">把很长的一段文字的溢出内容隐藏,出现省略号</p>



</body>
</html>