如何使省略号溢出到可点击的link？

Question

我希望溢出的文本最后一项（省略号 (...)）可以点击 link。有人吗？

<!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 个点成为省略号以用作 link？我没有找到任何解决方案，所以我需要你的帮助。我在不同的网站上看到它，但我没有找到解决方案。

Answer 1

看看这个。

$(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>

如何使省略号溢出到可点击的link？

How to make in overflow the ellipsis to a clickable link?

html

css

overflow