CSS 文本属性

最新推荐文章于 2024-01-25 09:51:03 发布

昨夜太平长安888

最新推荐文章于 2024-01-25 09:51:03 发布

阅读量215

点赞数

分类专栏： CSS 文章标签： CSS 文本溢出 white-space 文本修饰 underline 字间距

本文链接：https://blog.csdn.net/HelloWord176/article/details/100593388

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文本属性

text-align: 规定元素中的文字的水平对齐方式

text-align： center；文字居中对齐

常用的值：

text-align：center；文本居中对齐；
text-align：left ；文本左对齐（默认）；
text-align：justify；音标：/'dʒʌstɪfaɪ/ 文本两端对齐；

拓展： text-align：center；和 margin：0 auto；的区别？

1. text-align：center；是让容器里的文本内容居中；

2. margin：0 auto；是通过外边距自适应，让容器盒子本省居中

总结：一个是文本内容居中，一个是容器盒子本身居中！

text-decoration: 文本修饰

text-decoration： underline; 文字下划线

常用的值：

text-decoration：underline ；下划线；
text-decoration：overline；上划线；
text-decoration：line-through；删除线；
text-decoration：none；无任何修饰；

text-indent：文本首行缩进

常用： text-indent：2em；首行缩进两个字符

字间距

letter-spacing：2px；

word-spacing：2px;

letter-spacing：字符与字符之间的距离，对中文有效；
word-spacing：单词与单词之间的距离，对英文单词有效；

white-space：文本空白处理

所谓文本空白处理就是你编写程序代码时，你换行产生的空格和本身自打的空格处理方式！

常用：white-space：normal；默认正常，忽略多余的空格直留一个！

white-space：normal；默认正常，忽略多余的空格直留一个；
white-space：nowrap；强化本文在同一行显示；
white-space：pre；保留空白、空格；

重点：如果强制文本在同一行显示，文本溢出怎么处理？

下面三行代码合在一起可以实现文本溢出显示省略号，但是需要注意的是必须作用到属性本身，不具备继承性！

white-space: nowrap; /强制文本同一行显示/

overflow: hidden; /隐藏超出文本/

text-overflow: ellipsis; /将超出的文本显示为省略号/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文本溢出怎么处理？</title>
    <style>
        div {
            width: 100px;
            height: 20px;
            background-color: pink;
            /* 当文本溢出时？ */
            white-space: nowrap;  /*强制文本同一行显示*/
            overflow: hidden;  /*隐藏超出文本*/
            text-overflow: ellipsis;  /*将超出的文本显示为省略号*/
        }
     
    </style>
</head>
<body>
    <div>
        有一种痛叫做，我本可以，却没能坚持。雄心勃勃定下的目标，只要一星半点的理由
就可以化为泡影。实际上，恒心也是一种修为，是可以通过对自己的认识和了解去挖掘培养的。
    </div>
</body>
</html>

text-shadow：文本阴影

text-shadow： h v blur color；

例子：text-shadow：2px 5px 8px green；

h ：水平方向的阴影大小；

v ：垂直方向的阴影大小；

blur ：阴影的范围大小；

color ：阴影的颜色；

作业练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文本属性练习</title>
    <style>
        .sentence {
            width: 1200px;
            margin: 0 auto;  /*是通过外边距自适应让盒子容器本身水平左右居中*/
            text-align: center;   /*是让容器里面的文字内容水平居中(center)，，left左对齐，，right右对齐*/
            background-color: aqua;
        }
        .motivational {
            width: 600px;
            color: rgb(219, 189, 14);
            margin: 0 auto;
            background-color:black;
            text-align: justify;   /*文本内容 两端对齐*/
            /* text-indent: 2em;  文本首行缩进 */
            text-decoration: underline;  /*文本下滑线*/
            text-decoration: line-through;  /*文本删除线*/
            text-decoration: none; /*无任何修饰，用于清除默认样式*/
            letter-spacing: 5px;  /*字符与字符之间的距离，对中文有效*/
            word-spacing: 100px;  /*单词与单词之间的距离，对英文有效*/

            /* 文本溢出怎么处理？ */
            text-overflow: ellipsis;  /*当文本溢出时，显示省略号,只能设置本身，不具有继承性*/
            white-space: nowrap;  /*强制文本在同一行显示*/
            overflow: hidden;  /*文本超出时隐藏*/
        }
        .try {
            white-space: pre;    /*white-space： 文本空白处理  pre 保留空白、空格*/
            white-space: nowrap;   /* nowrap   强制文本在同一行显示 */
            white-space: normal;  /*默认 忽略多余空白，只留一个*/
        }
        .sentence h1{    /*文本阴影*/
            text-shadow: 3px 2px 5px red;
            /* text-shadow后面有四个值：第一个 h: 表示水平方向的阴影；
                                    第二个 v：表示垂直方向的阴影；
                                    第三个 blur：  阴影的范围；
                                    color：颜色； */
        }
    </style>
</head>
<body>
    <div class="sentence">
        <h1>文本属性练习</h1>
        <p>人的一生为什么要努力？有一句回答说的非常动人：因为最痛苦的事，不是失败，而是我本可以。</p>
    </div>
    <div class="motivational">
        本身就穷，折腾对了就成了富人；折腾不对，大不了还是穷人。I can i do it!如果不折腾、一辈子都是穷人！一想，二干，三成功， 一等，二看，三落空；想是问题做是答案； 输在犹豫，赢在行动！Nothing is impossible!（一切皆有可能）
        
    </div>
    <div class="try">
        有一种痛叫做，我本可以，却没能坚持。

　　雄心勃勃定下的目标，只要一星半点的理由就可以化为泡影。

　　实际上，恒心也是一种修为，是可以通过对自己的认识和了解去挖掘培养的。
    </div>
</body>
</html>

昨夜太平长安888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 文本属性

文本属性text-align:规定元素中的文字的水平对齐方式 text-align： center；文字居中对齐常用的值：text-align：center；文本居中对齐； text-align：left ；文本左对齐（默认）； text-align：justify；音标：/'dʒʌstɪfaɪ/ 文本两端对齐；拓展：text...
复制链接

扫一扫