css处理文字过长

文字过长就用... 代替，css代码如下
单行文本

.ellipsis{
	display: block;//块状显示
	overflow: hidden;//隐藏文字
	text-overflow: ellipsis;//显示...
	white-space: nowrap; //不换行
	width:100px;//超过100px就截取
}

多行文本

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

以 ‘-’连接文本

 .hyphens{
    hyphens: auto;
  }

高度塌陷

#box::after{
    content: '';
    display:block;
    overflow:hidden;
    height: 0;
    visibility: hidden;
    clear: both;
  }

自定义变量

/* 自定义属性 */
  :root{
    --theme-color:red;
  }
  h1{
    color: var(--theme-color);
    transform: scale(0.5);
  }