如何在段落末尾添加更多阅读链接? [英] How do I add a read more link at the end of a paragraph?

问题描述

我试图在段落末尾添加一个链接以阅读更多文本.我希望此链接像下面这样显示在段落的末尾:

I am trying to add a link to read more text at the end of a paragraph. I would like this link to display within the paragraph at the end like so:

我希望在段落中添加...和更多链接.

I want the paragraph to be appended with the ... and the read more link.

目前，我不希望read more链接做任何事情，因为一旦获得适当的链接，我便会向其中添加自己的功能.我只是在努力寻找一种方法来使链接看起来像这样.

For now I don't want the read more link to do anything as I will add my own function to it once I get the link in place. I am just struggling to find a way to get the link to appear like this.

我一直在看下面的jquery脚本，但是这似乎可以处理字符数，并且无论字符数是多少，都会切掉最后一个单词，然后不显示我想要的方式(链接显示在下面这段落).它还已经包含一个函数，该函数用于单击链接时发生的情况，由于我缺乏jquery的能力，因此我无法成功进行编辑.

I have been looking at the following jquery script, however this seems to work on a character count and cuts the last word at whatever the character limit is and then doesn't display the way I want it to (the link appears below the paragraph). It also already contains a function for what happens when the link is clicked which due to my lack of ability with jquery, I have been unsuccessful at editing out.

$(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，所以我有点迷路.

Do I need to use jQuery at all to get the result I am looking for? Can this be done with CSS alone? I don't really write jQuery at all so I am a bit lost.

任何帮助或暗示我可以去哪里的事情，将不胜感激.

Any help or hints at where I can go with this would be much appreciated.

已编辑以添加HTML标记

Edited to add HTML Mark-up

<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.

推荐答案

我希望以下内容对您有所帮助.

I hope the below one will help you.

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;
}

这篇关于如何在段落末尾添加更多阅读链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！