跳到主要内容

文本处理

text-overflow 内容溢出​

样式一：

.div {
    width: 200px; /* 宽度200像素 */
    white-space: nowarp; /* 限制不换行 */
    /* overflow: auto;  /* 滚动内容 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 溢出部分显示为省略号 */
}

样式二：

.div {
    width: 100px; /* 宽度100像素 */
    display: -webkit-box;  /* 实现类似flex纵向布局 */
    -webkit-box-orient: vertical; /* 实现类似flex纵向布局 */
    -webkit-line-clamp: 2; /* 盒子高度取2行，并自带省略功能 */
    overflow: hidden; /* 隐藏溢出内容 */
}

渐变色文字​

.div {
    background-image: -webkit-linear-gradient(0deg,yellow,red 10%,green 50%); /* 背景颜色从左到右渐变 */
    /* -90deg时，渐变为从上到下 */
    -webkit-background-clip: text; /* 用文本占据的空间剪裁盒子背景 */
    color: transparent; /* 文本颜色设为透明；将空间背景色显示出来 */
}

下划线动画​

完整HTML代码：

<html lang="en">
  <head>
    <style>
      .title span {
        background: linear-gradient(to right, #ec6b5f, #61c554) no-repeat;
        background-size: 0 2px;
        background-position: right bottom;
        transition: background-size 0.5s;
      }

      .title span:hover {
        background-position: left bottom;
        background-size: 100% 2px;
      }
    </style>
  </head>
  <body>
    <h1 class="title">
      <span>Hover over this text to see the underline animation</span>
    </h1>
  </body>
</html>