Level 63
I'm not sure to really understand what you are trying to do.
How do you want to display the whole paragraph ? On the same window ?
Jan 4, 2022
9
Level 1
how to add "read more" or "read less" to a paragraph
i am using a ck editor for inserting content into the database which stores the data along with the html tags like
and i want to add read more or read less button to toggle the paragraph of around 200 characters.
<div class="panel" id="mongo">
{!! nl2br(strip_tags($property->description)) !!}
</div>
i tried this solution https://laracasts.com/discuss/channels/laravel/read-more-in-paragraph but it actually disturbed the format of the paragraph and rendered the whole paragraph without the html tags like
Level 1
@vincent15000 https://codepen.io/JoshBlackwood/pen/pEwHe open the link and you will get my point, what actually i am trying to do.
Level 102
@salmankhan2482 so use that example. You can make the small version of the text with this laravel helper https://laravel.com/docs/8.x/helpers#method-str-words
1 like
Level 1
@Sinnbeck but actually the thing is that using that method disturb the pattern of the html. it makes the whole paragraph linear and all of the new line, break line and other html tags are removed.
Level 102
@salmankhan2482 Then use a css class to cut off the text (set the height of the container to a fixed number). And remove/add the class when the button is pressed. Here is an example of how tailwind does it https://tailwindcss.com/docs/text-overflow#truncate
1 like
Level 1
@Sinnbeck actually i am using bootstrap css but i will try to find that in bootstrap css.
Level 102
@salmankhan2482 https://getbootstrap.com/docs/4.0/utilities/text/
For longer content, you can add a .text-truncate class to truncate the text with an ellipsis.
1 like
Level 1
@Sinnbeck thank you so much for your response. but i solved the problem by using the css by giving the height and overflow and then add two buttons read more which increase the height of the div and read less which reduces the height of the div.
Level 73
Check this post on that issue https://forum.squarespace.com/topic/168010-custom-css-to-limit-blog-excerpt/?do=findComment&comment=389022
Please or to participate in this conversation.