单多行文本溢出显示省略号

单行

   overflow: hidden;
   white-space: nowrap;
       text-overflow: ellipsis;
1
2
3

多行

    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 5;  控制多少行后溢出为...
    -webkit-box-orient: vertical;
1
2
3
4
5
6
7

溢出显示滚动条

// 全部溢出显示滚动条
overflow:auto
// x轴溢出显示滚动条
overflow-x:auto
// y轴隐藏显示滚动条
overflow-y:auto
// 下面这个是让滚动条隐藏的样式
类名::-webkit-scrollbar{
  display:none
}
1
2
3
4
5
6
7
8
9
10