时间戳

首页 > 解决方案 > 如何使省略号溢出到可点击的链接？

html - 如何使省略号溢出到可点击的链接？

问题描述

我希望我溢出的文本最后一项（省略号（...））成为可点击的链接。有人吗？

<!doctype>
<html>
	<head>
		<title>ellipsis.link.html</title>
		<style>
			.box {
		    background-color: #ddd;
		    width: 250px;
			}
		  .box p {
		  display: -webkit-box;
		  -webkit-line-clamp: 5;
		  -webkit-box-orient: vertical;
		  overflow: hidden;
			}
		</style>
	</head>
<body>
<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.</p>
</div>
</body>
</html>

所以，我有一点问题。我需要一点帮助。我该怎么做才能使 3 个点成为省略号以用作链接？我没有找到任何解决方案，所以我需要你的帮助。我在不同的网站上看到它，但我没有找到解决方案。

标签： htmlcssoverflow

解决方案

看一下这个。 

$(function () {
	$('.more-content').on('click', function () {
  $('.maindiv').css('height','300px');
    $('.maindiv').css({
          "white-space": "normal",
          "overflow" : "visible"
    });
    $(this).hide();
	});
});
.maindiv {
  width: 250px;
  height: 106px;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
  word-wrap: break-word;
}

.more-content {
    position: relative;
    top: 88px;
    right: 19px;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    color: black;
}
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;
			}
<h1>Solution 1 </h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="maindiv">
 <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.</p>
</div>

 <a class="more-content" href="#">
     ...
 </a>
 <br/>
 <br/> <br/> <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
  <br/> <br/>
   <br/> <br/>
   <br/>

 <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<span><a href="https://www.google.com/">...</a></span>.</p>
</div>

推荐阅读