CSS 文本

1.文本对其 text-align

作用：这个属性能控制标签内文本水平方向的对齐方式，默认左对齐
注意：这个属性会被子元素继承
示例

<!DOCTYPE html>
<html>
    
<body>
    <div class="box" style="text-align:center">
        div的文本
    </div>
    <div class="box"  style="text-align:right">
        <psan>子元素span</psan>
    </div>
    <div class="box" style="text-align:right">
        <div>这个样式会被子元素继承</div>
    </div>
</body>
</html>

2.文本缩进 text-indent

作用：用于定义块级元素中第一个内容行的缩进,默认为0
注意：这个属性对于标签内的文本和行内元素，行内块级元素都有效，且会被子元素继承

<body>
    <div>默认缩进为0</div>
    <div style="text-indent: 50px;">缩进50px的文本</div>
    <!-- 除了文本，行内块元素也首这个属性影响 -->
    <div style="text-indent: 50px;">
        <input type="text" placeholder="input输入框缩进50px">
    </div>
    <!-- 这个样式会被继承 -->
    <div style="text-indent: 50px;">
        <p>这个样式会被继承</p>
    </div>
</body>

3.文本修饰 text-decoration

作用：用于设置文本的修饰线外观（下划线、上划线、贯穿线/删除线或闪烁）

值	说明
none	默认，没有任何修饰
underline	下划线，相当于<u>标签
overline	上划线
line-through	定义穿过文本下的一条线。相当于<del>标签
blink	存在兼容问题，闪烁的效果

示例代码及效果

<div>默认无修饰</div>
<div style="text-decoration: underline">underline 下划线</div>
<div style="text-decoration: overline">overline 上划线</div>
<div style="text-decoration: line-through">line-through 删除线</div>
<div style="text-decoration: blink">blink</div>

4.字符间距和字间距 letter-spacing/word-spacing

letter-spacing：控制的是单个字符件的间距（包括汉字）
word-spacing：控制的是单词的间距（对汉字无效）
示例代码及效果

<div>this is a good day（默认）</div>
<div style="letter-spacing: 10px;">this is a good day</div>
<div style="letter-spacing: 10px;">你好世界</div>
<div style="word-spacing: 10px;">this is a good day</div>
<div style="word-spacing: 10px;">你好世界</div>

5.子元素排列方向 direction

含义：子元素的排列方向，对行内块元素和行子元素有效（块级元素会换行当然不行咯），一般用在拥有多个子元素的容器身上
注意：direction是设置排列方向，而text-align是设置对其方向，不是一个概念

值	说明
ltr	默认，文本或者行子元素从左侧到右侧依次排列
rtl	文本或者行子元素从右侧到左侧依次排列

6.控制文本的大小写 text-transform

含义：用于转换字符的大小写
注意：这个只是对字母的展示效果进行了转换，Dom内部依旧是原先的值

值	说明
none	默认，不进行任何转换
capitalize	单词首字母大写
uppercase	全部转为大写字母
lowercase	全部转为小写字母

示例代码及效果

<div>hello world</div>
<div style="text-transform: capitalize">hello world</div>
<div style="text-transform: uppercase">hello world</div>
<div style="text-transform: lowercase">hello world</div>

7.处理空白和文本换行 white-space

含义：控制空白字符的显示，同时还能控制是否自动换行

值	说明
normal	合并连续的空白符、换行符为一个空白符,超出容器则换行
pre	原模原样的按照源代码中的格式进行输出，超出容器不会换行（源字符的换行会被保留）
nowrap	合并连续的空白符、换行符为一个空白符；超出容器不会换行,相当于在normal的基础上超出不换行
pre-wrap	保留空白符序列，但是正常地进行换行。相当于在pre的基础上超出则换行
pre-line	只保留换行符，其他连续空白符合并为一个空白，超出则换行，相当于在normal的基础上保留换行符

PS:标签内如果是一串长数字，超出是不会自动换行的！！！

如图：

<div style="white-space: pre;">（pre）中间的多个空格      会被合并解析成一个
    换行符被解析成空格
</div>

8.单词分割 word-break

含义：连续的字母会被浏览器解析成一个单词，单词本分是无法自动换行的(换行单词就不完整了)

值	描述
normal	使用浏览器默认的换行规则
break-all	允许在单词内换行
keep-all	只能在半角空格或连字符处换行

9.垂直对其 vertical-align

含义：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	使元素及其后代元素的底部与整行的底部对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length	将元素升高或降低指定的高度，可以是负数。
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

代码及效果

10.处理文本溢出 text-overflow

溢出的3个前提：容器宽度固定，文本必须单行显示，overflow: hidden
含义：满足上面3点后，是否使用...来代替被修剪的文本

值	说明
clip	修剪文本（默认）
ellipsis	显示省略符号来代表被修剪的文本

如果想要在一个容器保留多行文本且有剪裁下效果，需要用到其他属性

<style>
        div{
            width:300px;
            border: 1px solid red;
            margin: 50px auto;
            display: -webkit-box;
            /* 纵向 */
            -webkit-box-orient: vertical;    
            /* 分2行显示 无需再设置高度 */
            -webkit-line-clamp: 2; 
            overflow: hidden;
        }
</style>

<div >女生之间的友谊啊，就像塑料花，虽然假但永不凋零。不要轻易看不起谁，就算是杀马特，发量都比你多。
</div>

兼容性方面，我测试了最新chrome，firefox都没有问题，但是IE11仍然不支持。需要另辟蹊径，具体方案如下：
(1)容器设置确定的高度，再设置行高（最好让他们成倍数），设置成相对定位
(2)使用伪元素，定位到右下角，配合背景色覆盖右下角原本的文本

注意：用来遮挡的伪元素的渐变色，以及他的宽度可以自行调整，以实际为准，具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <style>
        .ellipsis{
            width:300px;
            border: 1px solid red;
            margin: 50px auto;
            position: relative;
            /* 放2行 */
            height: 50px;
            line-height: 25px;
            /* 超出隐藏 */
            overflow: hidden;
        }
        .ellipsis::after{
            position: absolute;
            bottom:0;
            right: 0;
            content:"...";
            line-height: 25px;
            width:15%;
            height:25px;
            /* 使用渐变色遮挡原文本 */
            background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 70%);
            /* 因为渐变色右边完全不透明，可以让...居右显示 */
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="ellipsis">女生之间的友谊啊，就像塑料花，虽然假但永不凋零。不要轻易看不起谁，就算是杀马特，发量都比你多。
    </div>
</body>
</html>

10.文本动效

/* 定义动画 */
@-webkit-keyframes masked-animation {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.title{
    background-image: -webkit-linear-gradient(left, #0ee5ff, #f4ab20 50%, #0ee5ff 50%, #f4ab20 100%, #0ee5ff);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 3s infinite linear;
}