第一个解决方案正在运行。如您所见：
<!DOCTYPE>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ellipsis.whole.html</title>
<style>
a {
text-decoration : none
}
.box {
background-color: #ddd;
width: 250px;
}
.box p {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Solution 1</h1>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean vehicula odio ac nisl
dignissim hendrerit. Proin libero arcu, commodo
in aliquam porta, dignissim sodales<span><a href="http://www.google.com/">...</a></span></p>
</div>
</body>
</html>第二个解决方案来了！我看不出两者之间的区别，但第二个不起作用。有人知道两者之间的区别吗？我看了很多遍，但没有答案。
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ellipsis.link.html</title>
<style>
a {
text-decoration: none;
}
.box {
background-color: #ddd;
width: 250px;
}
.box p {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Solution 2 </h1>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean vehicula odio ac nisl
dignissim hendrerit. Proin libero arcu, commodo
in aliquam porta, dignissim sodales tortor. Sed
dignissim mi cursus quam sollicitudin, vitae
semper nunc finibus. In id turpis velit. Nullam
finibus lobortis lacus vel egestas. In pretium
dictum ligula quis pulvinar. Aenean id dolor metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec commodo elementum erat blandit blandit.
Cras quis elementum mi<span><a href="http://www.google.com/">...</a></span>.</p>
</div>
</body>
</html>为什么我不能点击代码第二个版本的省略号？我好奇地等着你的答案！
如果你看到了，你会注意到在这两个版本中，你都将代码的这一部分的行数限制为5行：
-webkit-line-clamp: 5;
因此，在第二个例子中(有更多的文本(，"…"部分是不可点击的，因为elippse创建了三个点来显示有一个文本在继续。如果您尝试将该数字更改为"15"(相当于15行(，则会显示整个文本和最后一个"…"部分将是可点击的。您也可以删除
-webkit-box-orient: vertical;
部分和代码将忽略行的上限并显示整个文本，无论您在代码中的"lineclamp"标记中放了什么。