Jak dodać link czytaj więcej na końcu akapitu?

Question

Próbuję dodać łącze, aby przeczytać więcej tekstu na końcu akapitu. Chciałbym ten link, aby wyświetlić w pkt na koniec tak:

Chcę akapit być dołączane z ... czytaj więcej a odnośnik.

Na razie nie chcę, aby link do przeczytania więcej działał, ponieważ dodam do niego swoją własną funkcję, gdy tylko otrzymam link w miejscu. Właśnie walczę, aby znaleźć sposób, aby link wyglądał w ten sposób.

Przeglądam następujący skrypt jQuery, ale wydaje się, że działa on na liczbę znaków i obcina ostatnie słowo niezależnie od limitu znaków, a następnie nie wyświetla się tak, jak tego chcę (pojawia się link poniżej akapitu). Zawiera on również funkcję dotyczącą tego, co dzieje się po kliknięciu łącza, co z powodu braku umiejętności z jquery nie powiodło mi się podczas edycji.

$(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 */ 
      }); 
     } 
    }); 
}); 

Czy muszę w ogóle używać jQuery, aby uzyskać wynik, którego szukam? Czy można to zrobić za pomocą samego CSS? Naprawdę nie piszę jQuery, więc jestem trochę zagubiony.

Każda pomoc lub wskazówki dotyczące tego, gdzie mogę się z tym umówić, byłyby mile widziane.

Edytowane dodać 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> 

akapit w pytaniu .customer_experience.

Answer 1

Mam nadzieję, że poniżej jeden ci pomoże.

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

można znaleźć rozwiązanie tutaj:

Related Question

Ten link będzie przydatna:

CSS Solution

Answer 3

można wyciąć w przestrzeniach o coś takiego:

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

Answer 4

do odcinania akapitów. Ten skrypt sprawdza liczbę akapitów, a nie liczbę słów.

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> 

Przykład http://jsfiddle.net/9bXQh/2/

Answer 5

zrobiłem wyszukiwania w sieci i znaleźć tej wtyczki: http://dotdotdot.frebsite.nl/.

Myślę, że to nie odpowiada na twoje pytanie, tylko wskazuje kierunek, w którym można znaleźć rozwiązanie. Wygląda na to, że ta wtyczka pozwala ci na to, co chcesz: obcina tekst, gdy przekracza kontener o stałej wysokości, dodaje link "czytaj więcej" i powiąż własną niestandardową funkcję z linkiem "czytaj więcej".