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

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