截断多行文本
截断超过一行的文本。
- 使用
overflow: hidden
防止文本溢出其尺寸。 - 设置固定的
width
,以确保元素至少有一个固定的尺寸。 - 设置
height: 109.2px
,根据公式font-size * line-height * numberOfLines
(在本例中为26 * 1.4 * 3 = 109.2
)计算得出。 - 设置
height: 36.4px
,根据公式font-size * line-height
(在本例中为26 * 1.4 = 36.4
)计算得出,用于渐变容器。 - 使用
background
和linear-gradient()
创建从transparent
到background-color
的渐变。
<p class="truncate-text-multiline">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et.
</p>
.truncate-text-multiline {
position: relative;
overflow: hidden;
display: block;
height: 109.2px;
margin: 0 auto;
font-size: 26px;
line-height: 1.4;
width: 400px;
background: #f5f6f9;
color: #333;
}
.truncate-text-multiline::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 150px;
height: 36.4px;
background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
}