欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

溢出 省略号 ...

程序员文章站 2022-06-30 23:53:17
1.单行 css 里面: overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 2.elementUI table 中省略: show-overflow-tooltip 3.多行css里面: display: -webkit-box ......

 

1.单行  css 里面: 

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

 

2.elementui  table 中省略:

show-overflow-tooltip

 

3.多行css里面:

display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;

 

4.多行 p 里面:

p{

position: relative; line-height: 20px; max-height: 40px;overflow: hidden;

}

p::after{

  content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px; 

background: -webkit-linear-gradient(left, transparent, #fff 55%); 

background: -o-linear-gradient(right, transparent, #fff 55%); 

background: -moz-linear-gradient(right, transparent, #fff 55%); 

background: linear-gradient(to right, transparent, #fff 55%);

}