溢出隐藏,文本溢出显示省略号,多行文本显示省略号

 /* 溢出隐藏: */
.box {
  /* 默认值,溢出部分可见 */
  overflow: visible;
  /* 溢出部分隐藏 */
  overflow: hidden;
  /* 无论是否溢出,都显示滚动条 */
  overflow:scroll;
  /* 根据内容是否溢出,自动显示滚动条 */
  overflow: auto;
  width: 200px;
  height: 400px;
  background-color: red;
 }
 
/* 单行文本溢出显示省略号 */
.box {
  width: 160px;
  height: 20px;
  background-color: pink;
  /* 让文本自动换行显示*/
  white-space: normal;
  /* 1.让文本强制在一行显示 */
  white-space: nowrap;
  /* 2. 溢出隐藏*/
  overflow: hidden;
  /* 3.溢出隐藏后显示省略号 */
  text-overflow: ellipsis;
}

/* 多行文本显示省略号 有兼容性问题 以后建议在公司让后端处理 */
.box1 {
  width: 190px;
  height: 47px;
  background-color: red;
  /*  溢出隐藏*/
  overflow: hidden;
  /* 显示省略号 */
  text-overflow: ellipsis;
  /* 伸缩盒子 */
  display: -webkit-box;
  /* 第几行显示省略号 */
  -webkit-line-clamp: 2;
  /* 处理兼容性问题 */
  -webkit-box-orient: vertical
}