溢位 省略號 …

```...簡單點發表於2019-01-25

 

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%);

}

 

相關文章