Question

我正在尝试添加一个链接，以便在段落末尾阅读更多文字。我想这个链接最后显示在段落中，如下所示：

我希望段落附加...和更多链接。

现在我不希望阅读更多链接做任何事情，因为一旦我获得链接，我将添加自己的功能。我正在努力寻找一种让链接看起来像这样的方法。

我一直在查看以下jquery脚本，但是这似乎适用于字符数，并且无论字符限制是什么都会切断最后一个字，然后不显示我想要的方式（链接出现在下面）这段落）。它还包含一个函数，用于查看单击链接时发生的情况，由于我缺乏jquery的能力，我在编辑时失败了。

$(function(){ /* to make sure the script runs after page load */
    $('.customer_experience').each(function(event){ /* select all divs with the  customer_experience class */
        var max_length = 250; /* set the max content length before a read more link will be added */

        if($(this).html().length > max_length){ /* check for content length */
            var short_content   = $(this).html().substr(0,max_length); /* split the content in two parts */
            var long_content    = $(this).html().substr(max_length);

            $(this).html(short_content+
                '<a href="#" class="read_more"><br/>read more...</a>'+
                '<span class="more_text" style="display:none;">'+long_content+'</span>'); /* Alter the html to allow the read more functionality */

            $(this).find('a.read_more').click(function(event){ /* find the a.read_more element within the new html and bind the following code to it */
                event.preventDefault(); /* prevent the a from changing the url */
                $(this).parents('.customer_experience').find('.more_text').show(); /* show the .more_text span */
            });
        }
    });
});

我是否需要使用jQuery才能获得我想要的结果？这可以单独使用CSS吗？我根本不写jQuery，所以我有点迷失。

我非常感谢您对我可以使用的任何帮助或提示。

已编辑添加HTML标记

<div class='comments_container'>
    <img src='images/comment-icon.png'/>
    <h1 class='comments_title'>Customer experience</h1>
    <p class='customer_experience'>$customer_exp_one</p>
</div>

有问题的段落为.customer_experience。

Answer 1

我希望下面的人会帮助你。

http://jsfiddle.net/X5r8r/1156/

body, input {
    font-family: Calibri, Arial;
    margin: 0px;
    padding: 0px;
}
a {
    color: #0254EB
}
a:visited {
    color: #0254EB
}
#header h2 {
    color: white;
    background-color: #00A1E6;
    margin: 0px;
    padding: 5px;
}
.comment {
    width: 400px;
    background-color: #f0f0f0;
    margin: 10px;
}
a.morelink {
    text-decoration: none;
    outline: none;
}
.morecontent span {
    display: none;
}

Answer 2

切断段落。此脚本检查段落计数，而不是字数。

JS（使用Jquery）

$(document).ready(function() {

    /* Count of paragraphs shown */
    var cutCount = 2;

    $("#testID p").each(function (i) {
        i++;
        if(i == cutCount) {
            $(this).append(' <a href="javascript:void(1)" onclick="$(\'#testID p\').show(); $(this).hide()">Read more</b>')   
        }
        if(i > cutCount) {
           $(this).hide();
        }
    });

});

<强> HTML

<div id="testID">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas lobortis mi, quis convallis arcu interdum id. Nunc velit justo, congue ac vestibulum eu, sodales sed nulla. Nam semper egestas nunc, placerat suscipit lorem fringilla sit amet. Etiam id metus quis tellus luctus rhoncu</p>

<p>Donec euismod, dui aliquam vestibulum rutrum, urna ipsum luctus justo, in eleifend tellus ligula et elit. Morbi gravida lacinia magna quis faucibus. Duis arcu ligula, euismod sed ornare quis, posuere ac quam. Sed orci metus, pretium ut blandit sed, ullamcorper in eros. Mauris at euismod diam. Quisque auctor congue erat et varius. Nulla odio orci, convallis non fringilla vel.</p>

<p>Curabitur a velit eu lacus vestibulum vehicula. Proin mi velit, tempor quis convallis vulputate, adip</p>

<p>Nullam eget pulvinar arcu. Nam tellus tortor, luctus non rutrum eget, condimentum ac lectus. Nulla diam tellus, aliquet non auctor nec, bibendum nec orci. Proin rhoncus sodales sapien, sit amet eleifend erat sagittis quis. Ut et urna et erat venenatis convallis at sit amet sem. Quisque tempus sodales ornare. Maecenas eget nisi et ligula facilisis dictum.</p>

<p>Etiam lectus dolor, tincidunt a ultricies et, vehicula ut lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean bibendum suscipit nunc sit amet ultrices. Praesent nunc velit, dignissim eget tincidunt non, varius at velit. Aliquam ac interdum lectus. Nulla a ante lacinia arcu suscipit suscipit a nec mauris. In sed tempor massa. Donec luctus dapibus dolor, vel mattis justo pulvinar eget. Pellentesque scelerisque dolor ut erat cursus ornare. In in nunc et tellus consequat convallis id sed est. Integer dictum fermentum tempus. Ut lobortis ante vel ante condimentum lacinia. Donec malesuada pretium sapien, et euismod turpis faucibus at. Duis vel turpis ultrices enim viverra vestibulum vitae sed sapien.</p>

</div>

实施例 http://jsfiddle.net/9bXQh/2/

Answer 3

你可以用这样的东西切割空间：

$(this).html().substr(0, $(this).html().indexOf(" ", max_length))

Answer 4

我进行了网络搜索并找到了这个插件：http://dotdotdot.frebsite.nl/。

我想这并没有真正回答你的问题，只是指出你可能的解决方案。看来这个插件可以让你做你想做的事情：当文本超过固定高度的容器时截断文本，添加一个'read more'链接，并将你自己的自定义函数绑定到'read more'链接。

Answer 5

单击下面的按钮，通过课程更改显示和隐藏另一个元素：

.collapse隐藏内容

转换期间应用

.collapsing

.collapse.显示内容您可以使用包含href属性的链接或带有data-target属性的按钮。在这两种情况下，都需要data-toggle="collapse"。 HTML

  <div class="container">

     <div class="row justify-content-center">
      <div class="col-md-4">
        <div id="parent">
         <p class="collapse" id="collapseParent">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc     </p>
         <a class="collapsed" data-toggle="collapse" href="#collapseParent" aria-expanded="false" aria-controls="collapseParent"></a>
   </div>
 </div>

CSS

#parent {
   font-size: 14px;
   line-height: 1.5;
}

#parent p.collapse:not(.show) {
   height: 42px !important;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;  
  }

#parent p {
    min-height: 42px !important;
}

 #parent a.collapsed:after  {
     content: 'Read More';
  }

  #parent a:not(.collapsed):after {
      content: 'Read Less';
  }

CodePen Example

Answer 6

您可以在此处找到解决方案：

如何在段落末尾添加阅读更多链接？

6 个答案: