css3 文本超出容器后显示...以及超出几行后显示...

前言

好记性不如烂笔头，记录一下自己常用的css样式。

一，文本超出容器后显示…

国际酒店政策国际酒店政策国际酒店政策国际酒店政策国际酒店政策
.ellipsis-main{
  width: 100%;
  height: 40px;
  border: 1px solid #000;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

1
2
3
4
5
6
7
8
9
10

二，文本超出几行后显示…

国际酒店政策国际酒店政策国际酒店政策国际酒店政策国际酒店政策
.ellipsis-main-line {
  display: -webkit-box;
  text-overflow: ellipsis;
  line-clamp: 5;      //这个就是设置超出5行后显示...
  -webkit-line-clamp: 5;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
1
2
3
4
5
6
7
8
9