css

1.清除文字的默认留白 line-height:1;

    <div class="index">你好啊！</div>
  <style>
        *{
              margin:0;
              padding:0;
          }
        /***清空默认样式*/
          .index{
                line-height:1;
            /* 可清除文字所带的行高*/
          }
   </style>

2.文字一行显示

.sl1{
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

3.文字两行显示

.sl2{
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

4.文字3行显示

.sl3{
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

5.文字渐变效果

  <div class="f24 gradient-text">剧本杀</div> 
<style>
 .gradient-text {
    font-size: 74rpx;
    font-weight: bold;
    background-color: white;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite;
}

@keyframes mymove {
    from {
        background-color: red;
    }
    to {
        background-color: blue;
    }
} 
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    .gradient-text {
        background-image: -webkit-linear-gradient(left, #623ffd, #fff6a3 25%, #f75c57 50%, #b485eb 75%, #90b390);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        -webkit-animation: masked-animation 15s infinite linear;
    }
}
@-webkit-keyframes masked-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}
</style>

6.