Truncated Text: Replace the '...'

Wappler General Need Help
1

I have some truncated text and it works great!

{{optimized_full.data.comments[0].comment_text.trunc(400, true, ' ...')}}

I’d like to replace the ... with a ‘Read More’ link. Is that possible? I know I can change the … to Read More but how can I add a link? Basically I just need it to open an offCanvas panel.

2

Hey @brad,

I tried dmx-html and it works…
I created a <span> element assigned to it the data-bs-toggle & data-bs-target and gave it a role="button"

<span class="text-danger" role="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasFilters">Read more</span>

Then I added a paragraph and set its dmx-html to trunc(nn, ‘true’, ‘…’) + the span that triggers the offCanvas

<p class="" dmx-html="srvc_prodList.data.qr_Prod_List.data[0].prd_Name.trunc(30, 'true', '...')+'&lt;span class=&quot;text-danger&quot; role=&quot;button&quot; data-bs-toggle=&quot;offcanvas&quot; data-bs-target=&quot;#offcanvasFilters&quot;&gt;Read more&lt;/span&gt;'">Fancy display heading</p>

home-google-chrome-2023-12-06-17-43-25_0S3ydFoT

2 Likes
3

Thank you! I will give it a try today. Much appreciated.

1 Like
4

Will this not work?
{{optimized_full.data.comments[0].comment_text.trunc(400, true, '')}}<a href="https://yoursite.com/page">Read more...</a>

5

Thanks Tom, yes, that would work. But I only want to show the ‘Read More’ link if the text is truncated.

6

use dmx-show to only show the link if the text is a greater length than 400.

I cant get to my machine right now so cant write it for you

1 Like
7

Interesting idea. I will give it a try.

8

This should work for you:
<a href="https:yourlink.com" dmx-show="(optimized_full.data.comments[0].comment_text.length() &gt; 400)">... read more</a>

1 Like
9

Thanks for pointing me in the right direction guys (@TMR and @famousmag) Works like a charm.

{{optimized_full.data.comments[0].comment_text.trunc(400, true, ' ...')}} <span dmx-show="optimized_full.data.comments[0].comment_text.length()&gt;=400"><a href="javascript:void(0);" dmx-on:click="offcanvasCommentHistory.show()">more</a></span>
2 Likes