超出范围文字以...替代

超出一行用...代替

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

超出多行用...代替 这里以10行来展现效果（兼容苹果）

.multilineellipsis {
  width: 100%;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 10 !important;
  line-height: 1.6; /* 明确行高 */
  word-break: break-all; /* 避免长词破坏布局 */
}
@supports (-webkit-touch-callout: none) {
  .multilineellipsis {
    max-height: calc(1.6em * 10); /* 10 行高度 */
    overflow: hidden;
    position: relative;
  }

  .multilineellipsis::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 1.6em;
    background: linear-gradient(transparent, #fff); /* 渐隐遮盖 */
  }
}