CSS

简单 loading 效果

.loading-rotate {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 5px solid #ccc;
  border-top-color: #f00;
  border-radius: 50%;
  animation: loading 1s linear infinite;
}
@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

长文本换行

https://webb1an.github.io/

white-space: pre-line;
word-wrap: break-word;

文本溢出

单行文本溢出

https://webb1an.github.io/

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本溢出

https://webb1an.github.io/ 多行文本测试多行文本测试多行文本测试多行文本测试

white-space: pre-line;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;