How to add an sitelink at the end of a paragraph?

Question

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

I want the paragraph to be added with ... and a link for the link.

At the moment, I do not want the reading link to be made, as I will add my own function when I get the link to the place. I'm just trying to find a way for the link to appear like this.

I considered the following jquery script, however this seems to work on the number of characters and shortens the last word for any character value, and then does not display the way I want it (the link appears under the paragraph). It also contains a function for what happens when a link is clicked, which due to my lack of features with jquery, I was unsuccessful when editing.

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

Do I need to use jQuery at all to get the result I'm looking for? Can this be done only with CSS? I don't write jQuery at all, so I'm a little lost.

Any help or hints on where I can go with this would be greatly appreciated.

Edited to add HTML marking

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

This paragraph is .customer_experience .

Answer 1

I hope that below 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; } 

Answer 2

To kill paragraphs. This script checks the number of paragraphs, not the number of words.

JS (with 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> 

Example http://jsfiddle.net/9bXQh/2/

Answer 3

you can cut in space something like this:

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

Answer 4

I did a web search and found this plugin: http://dotdotdot.frebsite.nl/ .

I assume that this does not really answer your question, just indicates a possible solution. This plugin seems to allow you to do what you want: crop text when it exceeds a container with a fixed height, add a read next link, and bind your own custom function to a read further link.

Answer 5

You can find the solution here:

Question related to us

This link is useful to you:

CSS solution