CSS 文本 - ---空白---

3.文本修饰 text-decoration

作用：用于设置文本的修饰线外观（下划线、上划线、贯穿线/删除线或闪烁）
<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是设置对其方向，不是一个概念
<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
含义：控制空白字符的显示，同时还能控制是否自动换行
兼容性方面，我测试了最新chrome，firefox都没有问题，但是IE11仍然不支持。需要另辟蹊径，具体方案如下：

(1)容器设置确定的高度，再设置行高（最好让他们成倍数），设置成相对定位

(2)使用伪元素，定位到右下角，配合背景色覆盖右下角原本的文本
注意：用来遮挡的伪元素的渐变色，以及他的宽度可以自行调整，以实际为准，具体代码：
<!DOCTYPE html>
<html lang="en">
    <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>
    <div class="ellipsis">女生之间的友谊啊，就像塑料花，虽然假但永不凋零。不要轻易看不起谁，就算是杀马特，发量都比你多。
</body>
</html>
10.文本动效
/* 定义动画 */
@-webkit-keyframes masked-animation {
        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;
11.文字描边
-webkit-text-stroke

-webkit-text-stroke文字描边CSS属性及展开