CSS 文本外观属性

最新推荐文章于 2023-03-29 14:07:58 发布

今天不是愚人节

最新推荐文章于 2023-03-29 14:07:58 发布

阅读量615

点赞数 4

分类专栏： HTML CSS 学习文章标签： CSS 文本属性文本装饰 HTML

本文链接：https://blog.csdn.net/qq_32446225/article/details/89308109

版权

HTML 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

学习

4 篇文章 0 订阅

订阅专栏

white-space 空白符处理

		.pn1{
            white-space: normal;          //换行和空格不起作用
        }
        .pn2{
             white-space: pre;		      //保留空格换行
        }
        .pn3{
              white-space: nowrap;		  //没有换行，强制不换行
        }

text-overflow 溢出文本

   	.p7{
           width: 200px;
           height: 100px;
           white-space: nowrap;        //不换行
           overflow: hidden;           //溢出时隐藏
           text-overflow: ellipsis;    //省略号表示
       }

text-shadow文本阴影

	text-shadow: 4px 5px 5px pink,4px 5px 5px skyblue;

*** 多重阴影之间加逗号隔开 ***

完整代码片

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文本外观属性</title>
    <style type="text/css">
        .divNo1{
            width: 50%;
            margin: 0 auto;
            background-color: #ffcbf7;
        }
        p{
            border: 1px solid deepskyblue;
            font-size: 21px;
            background-color: pink;
        }
        .TextColorRed{
            color: red;
        }
        .LetterSpacing1{
            letter-spacing: 20px;
        }
        .LetterSpacing2{
            letter-spacing: 20px;
        }
        .WordSpacing1{
            word-spacing: 2em;
        }
        .WordSpacing2{
            word-spacing: 2em;
        }
        .LineHeight{
            line-height: 2em;
        }
        .TextTransform-uppercase{
            text-transform: uppercase;
        }
        .TextTransform-capitalize{
            text-transform: capitalize;
        }
        .TextTransform-lowercase{
            text-transform: lowercase;
        }
        .TextDecoration-Underline{
            text-decoration: underline;
        }
        .TextDecoration-Overline{
            text-decoration: overline;
        }
        .TextDecoration-Through{
            text-decoration: line-through;
        }
        .TextAlign-left{
            text-align: left;
        }
        .TextAlign-right{
            text-align: right;
        }
        .TextAlign-center{
            text-align: center;
        }
        .Indent-em{
            text-indent: 2em;
        }
        .Indent-px{
            text-indent: 50px;
        }
        .Indent-B{
            text-indent: 30%;
        }
        .white-space-normal{
            white-space: normal;
        }
        .white-space-pre{
            white-space: pre;
        }
        .white-space-nowrap{
            white-space: nowrap;
        }
        .TextOveFlow-clip{
            text-overflow: clip;
        }
        .TextOveFlow-ellipsis{
            white-space:nowrap;         /*先强制不能换行，所有文字都在一行上，单用这个会出现滚动条，看text—overflow*/
            text-overflow:ellipsis;     /*然后把超出边框的文字用省略号表示在最后一个字符的位置*/
            overflow:hidden;            /*溢出的部分隐藏掉*/
        }
        .TextShadow{
            font-size: 50px;
            text-shadow: 10px 10px 15px yellow;
        }
    </style>
</head>
<body>
    <div class="divNo1">
        <p class="TextColorRed">这段文本颜色设置为红色</p>
        <p class="LetterSpacing1">这段中文的字间距设置为20px</p>
        <p class="LetterSpacing2">这段英文的字间距设置为20px I like you,but just like you</p>
        <p class="WordSpacing1">这段中文的单词间距设置为2em</p>
        <p class="WordSpacing2">这段英文的单词间距设置为2em I like you,but just like you</p>
        <p class="LineHeight">这段文本行间距设置为2em <br>这段文本行间距设置为2em</p>
        <p class="TextTransform-uppercase">这段英文的设置为全部字符转换为大写I like you,but just like you</p>
        <p class="TextTransform-capitalize">这段英文的设置为首字母大写I like you,but just like you</p>
        <p class="TextTransform-lowercase">这段英文的设置为全部字符转换为小写I like you,but just like you</p>
        <p class="TextDecoration-Underline">设置下划线</p>
        <p class="TextDecoration-Overline">设置上划线</p>
        <p class="TextDecoration-Through">设置删除线线</p>
        <p class="TextAlign-left">文本左对齐</p>
        <p class="TextAlign-right">文本右对齐</p>
        <p class="TextAlign-center">文本居中对齐</p>
        <p class="Indent-em">首行缩进2字符</p>
        <p class="Indent-px">首行缩进50像素</p>
        <p class="Indent-B">首行缩进30%</p>
        <p class="white-space-normal">常规值      ，     文中的空行、
            空格
            无
                      效，满             行
            后        自动            换

            行。常规值      ，     文中的空行、
            空格
            无
            效，满             行
            后        自动            换

            行。常规值      ，     文中的空行、
            空格
            无
            效，满             行
            后        自动            换

            行。</p>
        <p class="white-space-pre">预   格   式 化，按
            文
                  档的
            书写格式    保  留  空格、空行    原样显示。</p>
        <p class="white-space-nowrap">合


            并所            有空白                  符为一个空白符，强制文本不能换行，除非遇到换行标记 <br>。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。</p>
        <p class="TextOveFlow-clip">修剪溢出文本，不显示省略标记……修剪溢出文本，不显示省略标记……修剪溢出文本，不显示省略标记……修剪溢出文本，不显示省略标记……修剪溢出文本，不显示省略标记……修剪溢出文本，不显示省略标记……</p>
        <p class="TextOveFlow-ellipsis">用省略标记“……”标志倍修剪文本，省略标记插入的位置是最后一个字符。需结合overflow:hidden使用。用省略标记“……”标志倍修剪文本，省略标记插入的位置是最后一个字符。需结合overflow:hidden使用用省略标记“……”标志倍修剪文本，省略标记插入的位置是最后一个字符。需结合overflow:hidden使用</p>
        <p class="TextShadow">这段文字加阴影</p>
    </div>
</body>
</html>

在这里插入图片描述