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

Web 検索を行ったところ、このプラグインが見つかりました: http://dotdotdot.frebsite.nl/。

それはあなたの質問に実際に答えているわけではなく、可能な解決策の方向性を示しているだけだと思います. このプラグインを使用すると、必要なことを実行できるようです。テキストが固定高さのコンテナーを超えたときにテキストを切り捨て、「続きを読む」リンクを追加し、独自のカスタム関数を「続きを読む」リンクにバインドします。

于 2013-04-17T11:47:42.837 に答える