如何在不使用-webkit线夹的情况下应用多行省略号



这里我有动态加载的p标签中的内容。我想在特定行之后应用文本省略号(例如,如果内容较长,则将文本省略符显示到第4行(

p {
width: 400px;
height: 300px;
text-align: justify;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiline Ellipsis</title>
</head>
<body>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>

您可以将行高设置为已知值(例如1em(,并使用该值在所需行数(在您的情况下为4em(之后剪切文本。之后,您可以使用::after伪元素在纯CSS中添加省略号。

p {
width: 400px;
text-align: justify;
position: relative;
line-height: 1em;
height: 4em;
overflow: hidden;
}
p::after {
content: '...';
position: absolute;
right: 0;
bottom: 0;
padding-left: 5px;
background: rgb(255, 255, 255);
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 1) 100%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiline Ellipsis</title>
</head>
<body>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>

最新更新