CSS层叠样式表

css文本属性

1文本缩进

text-indent 属性将⻚⾯上的段落的第⼀⾏进行缩进(首行缩进)，这是⼀种最常⽤的⽂本格式化效果

p {
    text-indent:20px; 
}
p {
    text-indent:2em; 
}

2文本对齐

text-align属性设置⽂本⽔平对⻬⽅式。 取值：

left：内容左对⻬。

center：内容居中对⻬。

right：内容右对⻬。

justify：内容两端对⻬，对最后⼀⾏⽆效

       @方法1text-align-last:justify;对最后一行生效

       @方法2

使用伪元素：
需要使用after，将伪元素放在需要两端对齐的元素后面，作为第二行
设定after的width为100%，生成第二行
设置为行内快元素，设置的width才有效
-->
<style>
    p.test {
        text-align: justify;
    }
    p.test:after {
        content: "";
        display: inline-block;
        width: 100%;
    }
</style>
<p class="test">
    只有一行很短的文字
</p>

3文本修饰

text-decoration 属性设置⽂本装饰线条的位置，

none 指定⽂字⽆装饰

underline 指定⽂字的装饰是下划线

overline 指定⽂字的装饰是上划线

line-through 指定⽂字的装饰是贯穿线

solid 线条显示为单行

double 线条显示为双线

dotted 线条显示为点线

dashed 线条显示为虚线

wavy 线条显示为波浪线

.under {
    text-decoration: underline red;
}
.over {
    text-decoration: wavy overline orange;
}
.lineThough {
    text-decoration: line-through;
} 
.none {
    text-decoration: none;
}
.under01 {
    text-decoration-line: overline underline;
}

4单词间距

word-spacing

p {
    word-spacing:20px;
}

normal 默认间隔值

中文使用时需要加个空格

5文本间距

letter-spacing   属性设置字符之间的间距

p {
    letter-spacing:20px;
}

文本换行 

word-wrap 让文字换行

word-wrap 属性设置⽂本内部⻓单词或URL换⾏ 取值：

normal 默认值（浏览器保持默认处理）。

break-word 在⻓单词或 URL 地址内部进⾏换⾏。

word-break

word-break 属性设置⾃动换⾏的处理⽅法 取值：

normal 使⽤浏览器默认的换⾏规则。

break-all 允许在单词内换⾏。

keep-all 只能在半⻆空格或连字符处换⾏。

white-space 不允许文字换行

text-overflow   文本溢出剪切文字

文字阴影 

text-shadow :2px(x轴) 2px （y轴）2px（模糊程度） #000;

    .box{
            text-shadow: 3px 3px 2px red;
        }

多层阴影

text-shadow :2px(x轴) 2px （y轴）2px（模糊程度） #000，2px(x轴) 2px （y轴）2px（模糊程度） #000；

  .box1{
            text-shadow: 2px 2px 2px  green , 4px 4px 4px red;
        }

盒子阴影

box-shadow 属性向框添加一个或多个阴影。

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

   /* 盒子阴影 */
        .box2{
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* 外部阴影  负值是原本阴影的对面*/
            /* box-shadow:-2px -2px 3px 3px red ; */
            /* 内部阴影     负值是原本阴影的对面*/
            box-shadow:3px 3px 3px 3px red inset ;
        }

 文字描边

/* 文字描边  镂空  taansparent 透明 /     用rgba颜色值随意设置，透明度为0*/
        .box3{
            -webkit-text-stroke:1px red;
            /* color: transparent; */
            color: rgba(144,137,187,0);
        }

 多行文本垂直居中

  /* 多行文本居中 */
        .box{
            width: 500px;
            height: 600px;
            border: 1px solid #000;
            /* 把div变成表格，改变标签的性质 */
            display: table-cell;
            /* 垂直方向上居中 */
            vertical-align: middle   ;
            /* 水平方向上居中 */
            text-align: center;
        }

单行省略

 .one{
            width: 400px;
            border: 1px solid red;
            /* 不换行 */
            white-space: nowrap;
            /* 超出部分隐藏 */
            overflow: hidden;
            /* 超出的部分加省略号 */
            text-overflow: ellipsis;
        }

多行省略 

  .box{
            width: 500px;
            border:1px solid #000;
            /* 让box标签变成弹性盒子 */
            display: -webkit-box;
            /* 保留的行数 */
            -webkit-line-clamp: 2;
            /* 按垂直方向上的排序 */
            -webkit-box-orient: vertical;
            /* 超出部分隐藏 */
            overflow: hidden;
        }