单行省略 ​

css
.one-ellipsis {
  overflow: hidden;
  /*文本不会换行*/
  white-space: nowrap;
  /*当文本溢出包含元素时，以省略号表示超出的文本*/
  text-overflow: ellipsis;
}

多行省略 ​

css
.two-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

隐藏滚动条 ​

css
/* chrome */
body::-webkit-scrollbar {
  display: none;
}
/* IE */
body {
  -ms-overflow-style: none;
}
/* FireFox */
/* https://blog.csdn.net/weixin_44070058/article/details/112555450 */

按原格式显示多个空格并且自动换行 ​

css
.pre-format{
  white-space: pre-wrap;
  word-break: break-all;
}

grid布局常用模式 ​

css
.grid {
  display: grid;
  /* 每个宽度占据22%，平铺 */
  grid-template-columns: repeat(auto-fill, 22%);
  /* 最后一个占100px，剩下的空间1:2均分 */
  grid-template-columns: 1fr 2fr 100px;
  /* 行、列间距 */
  grid-gap: 16px 4%;
}

​

css