实用的 CSS 样式

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

.line-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.line-2 {
  -webkit-line-clamp: 2;
}

.line-3 {
  -webkit-line-clamp: 3;
}

.line-4 {
  -webkit-line-clamp: 4;
}

.line-5 {
  -webkit-line-clamp: 5;
}

.line-2,
.line-3,
.line-4,
.line-5 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; // 弹性伸缩盒
  -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
}

.demo {
  width: calc(100% - 200px);
}

.safe-area-inset-bottom {
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.fix-ios-appearance {
  -webkit-appearance: none;
}

.border,
.border-bottom,
.border-left,
.border-right,
.border-top,
.border-top-bottom {
  position: relative;
}

.border-bottom:after,
.border-left:after,
.border-right:after,
.border-top-bottom:after,
.border-top:after,
.border:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  box-sizing: border-box;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  // 多加0.1%，能解决有时候边框缺失的问题
  width: 199.8%;
  height: 199.7%;
  transform: scale(0.5, 0.5);
  border: 0 solid #eeeeee;
  z-index: 2;
}

.border-top:after {
  border-top-width: 1px;
}

.border-left:after {
  border-left-width: 1px;
}

.border-right:after {
  border-right-width: 1px;
}

.border-bottom:after {
  border-bottom-width: 1px;
}

.border-top-bottom:after {
  border-width: 1px 0;
}

.border:after {
  border-width: 1px;
}

input {
  outline: none;
}