How to strip HTML from an ACF Text Area field (when loading as a paragraph via a Cwicly Query)?

Hi Guys,
So I have a custom field which is an ACF Text Area field. This field is an address field and so when it is input in the back end it will be input with line breaks, here is an example:

50 Martin Place,
Sydney,
NSW 2000,
Australia

In order to display this field on any of my front end templates, I am using the Query Element, with a Cwicly Paragraph element to display the field text string.

On the single post template for my custom post type, I want for this to display in the same way it is input (with the line breaks). However, on the archive page, to save space, I want for this to display on a single line - so I want for the line breaks / HTML to be stripped out.

In order to achieve the address to load with line breaks on my single post template, in ACF I need to set the ‘New Lines’ setting to ‘Automatically Add <br>

However, when I change this setting in ACF, this also changes the display on my archive template on the front end to this…

…when in fact I want it to display like this…

In my previous page builder, my query display had a setting which allowed me to ‘strip HTML’ from the output. But I cannot find any way to do this in Cwicly?

I searched through this forum and I came across the following thread which seems to be asking the same as me - and which ‘appears’ to have a suggested hack / fix to remove the line breaks from the output…

That thread seems to suggest that if I change the ‘</>’ setting of my paragraph block from <p> to <div>, that it will then remove the line breaks from the rendered output, however, even after making that change to the setting (see my screenshot below), the output still renders with line breaks in the front end.

So - how do I fix this please?

Thanks in advance for your help :slight_smile:

Keith

A simple solution is the keep this setting for the field and use CSS for the instance where you want to display it in one line. You can strip the line breaks using the following css in a relative style:

Screenshot 2024-01-21 at 17.25.45

Screenshot 2024-01-21 at 17.26.14

Thank you very much for this :slight_smile:
Where I am still very new to Cwicly, I haven’t even seen this ‘relative styling’ capabilities yet - so I will try and familiarise myself with it and read the docs, then follow what you have suggested.

It would still of course be useful for Cwicly to have a setting on the dynamic data which did this dynamically for us, but this will hopefully work as a hack until that point

Thanks again,

Keith

1 Like