VioletQQY的任意门
0%

文本溢出解决方案

Posted on In

文本溢出解决方案

单行文本溢出

1. 使用 text-overflow: ellipsis 属性

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

多行文本溢出

1. 使用 webkit 属性

1
2
3
4
5
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

2. 使用 :after 解决兼容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
p {
  position:relative;
  line-height:1.4em;
  /* 3 times the line-height to show 3 lines */
  height:4.2em;
  overflow:hidden;
}
p::after {
  content:"...";
  font-weight:bold;
  position:absolute;
  bottom:0;
  right:0;
  padding:0 20px 1px 45px;
  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%);
}