10

我正在尝试添加一个链接以在段落末尾阅读更多文本。我希望这个链接在最后的段落中显示,如下所示:

我希望该段落附有 ... 和阅读更多链接。

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

我一直在查看以下 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

4

5 回答 5

21

我希望下面的对你有帮助。

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;
}
于 2013-04-17T11:31:09.180 回答
4

用于截断段落。此脚本检查段落计数,而不是字数。

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/

于 2013-04-17T11:36:39.900 回答
2

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

$(this).html().substr(0, $(this).html().indexOf(" ", max_length))
于 2013-04-17T11:20:13.180 回答
1

我进行了网络搜索,发现了这个插件:http ://dotdotdot.frebsite.nl/ 。

我想这并不能真正回答您的问题,只是为您指明可能的解决方案的方向。看起来这个插件可以让你做你想做的事:当文本超过固定高度的容器时截断文本,添加一个“阅读更多”链接,并将你自己的自定义函数绑定到“阅读更多”链接。

于 2013-04-17T11:47:42.837 回答
0

单击下面的按钮以通过类更改显示和隐藏另一个元素:

.collapse隐藏内容

.collapsing在过渡期间应用

.collapse.show 显示内容 您可以使用带有属性的链接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 示例

于 2018-05-09T12:35:07.617 回答