enter image description here

Hello. How to make it so that where I marked in red, the link "read more" appears? Ie how to set a word limit?

  • It seems to me wrong to do this on the client side. But if you really want to, on js, consider the spaces in the string and that’s all ... - Andrey Fedorov

1 answer 1

As @AndreyFedorov correctly noted, pruning is traditionally logically done on the server side.

But if you really want, you can cut off by words and on the client using javascript:

$(document).ready(function() { var wordsToCut = 15; var contentWrapper = $('div'); var contentText = contentWrapper.text(); contentText = contentText.split(' ').slice(0, wordsToCut).join(' '); contentWrapper.text(contentText); contentWrapper.append("... <a href='#'>Читать далее</a>"); }); 
 div { width:300px; background: #EEE; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar rhoncus tempus. Mauris non velit vitae leo tempor fringilla sed quis mi. In dignissim ultrices augue ut molestie. Maecenas venenatis auctor mauris. Integer a ex sit amet nibh ultricies posuere. Integer suscipit dui augue. Donec finibus mi eget dapibus varius. In pulvinar nec dolor eu rhoncus. Etiam volutpat pellentesque eros et euismod. Nam vitae mollis sem. Suspendisse ornare enim libero, a ornare tortor suscipit quis. Nunc tincidunt pretium ligula a finibus. Suspendisse cursus massa a convallis mattis. Integer consectetur aliquam nisl, pretium mattis mi. Donec laoreet felis a ligula congue, tincidunt bibendum dolor dignissim. Nam sodales imperdiet tincidunt. Vivamus eu lobortis nisi, sed sodales nulla. Nullam quis hendrerit mauris. Vestibulum sollicitudin sit amet urna in viverra. Vestibulum eros libero, elementum at vehicula eu, fringilla porta turpis. Curabitur at elit at quam ultrices fermentum ut in turpis. Donec porta, turpis non fermentum sollicitudin, dui purus tincidunt diam, ut euismod orci neque eget felis. Integer pharetra pretium eros ut mattis. Nunc quam nisi, egestas eget dui vel, tempor efficitur tortor.</div>

But cutting by the number of words is not always appropriate, because, depending on the genre of the text, words of different lengths can appear in it, therefore the result is not always predictable. Therefore, in practice, they are often cut off by the number of characters, since characters have approximately the same width and, accordingly, different texts will also have approximately the same width:

  $(document).ready(function() { var lettersToCut = 140; var contentWrapper = $('div'); var contentText = contentWrapper.text(); contentText = contentText.substr(0, lettersToCut); contentWrapper.text(contentText); contentWrapper.append("... <a href='#'>Читать далее</a>"); }); 
 div { width: 300px; background: #EEE; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar rhoncus tempus. Mauris non velit vitae leo tempor fringilla sed quis mi. In dignissim ultrices augue ut molestie. Maecenas venenatis auctor mauris. Integer a ex sit amet nibh ultricies posuere. Integer suscipit dui augue. Donec finibus mi eget dapibus varius. In pulvinar nec dolor eu rhoncus. Etiam volutpat pellentesque eros et euismod. Nam vitae mollis sem. Suspendisse ornare enim libero, a ornare tortor suscipit quis. Nunc tincidunt pretium ligula a finibus. Suspendisse cursus massa a convallis mattis. Integer consectetur aliquam nisl, pretium mattis mi. Donec laoreet felis a ligula congue, tincidunt bibendum dolor dignissim. Nam sodales imperdiet tincidunt. Vivamus eu lobortis nisi, sed sodales nulla. Nullam quis hendrerit mauris. Vestibulum sollicitudin sit amet urna in viverra. Vestibulum eros libero, elementum at vehicula eu, fringilla porta turpis. Curabitur at elit at quam ultrices fermentum ut in turpis. Donec porta, turpis non fermentum sollicitudin, dui purus tincidunt diam, ut euismod orci neque eget felis. Integer pharetra pretium eros ut mattis. Nunc quam nisi, egestas eget dui vel, tempor efficitur tortor.</div>

Well, if the task is like “the text should occupy the specified container, no more and no less,” then you can hide part of the text using css:

 div { width: 300px; height: 90px; position: relative; overflow: hidden; background: #EEE; } div a { width: 120px; display: block; position: absolute; bottom: 0; right:0; background: #EEE; text-align: right; } 
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar rhoncus tempus. Mauris non velit vitae leo tempor fringilla sed quis mi. In dignissim ultrices augue ut molestie. Maecenas venenatis auctor mauris. Integer a ex sit amet nibh ultricies posuere. Integer suscipit dui augue. Donec finibus mi eget dapibus varius. In pulvinar nec dolor eu rhoncus. Etiam volutpat pellentesque eros et euismod. Nam vitae mollis sem. Suspendisse ornare enim libero, a ornare tortor suscipit quis. Nunc tincidunt pretium ligula a finibus. Suspendisse cursus massa a convallis mattis. Integer consectetur aliquam nisl, pretium mattis mi. Donec laoreet felis a ligula congue, tincidunt bibendum dolor dignissim. Nam sodales imperdiet tincidunt. Vivamus eu lobortis nisi, sed sodales nulla. Nullam quis hendrerit mauris. Vestibulum sollicitudin sit amet urna in viverra. Vestibulum eros libero, elementum at vehicula eu, fringilla porta turpis. Curabitur at elit at quam ultrices fermentum ut in turpis. Donec porta, turpis non fermentum sollicitudin, dui purus tincidunt diam, ut euismod orci neque eget felis. Integer pharetra pretium eros ut mattis. Nunc quam nisi, egestas eget dui vel, tempor efficitur tortor.<a href="#">Читать далее</a></div>