here is my case scenario
I am creating a component that shows an image with a caption underneath it, once the image is clicked, it opens a modal with a full vh version of the image and the caption on the left.
I want to show the caption under the image as one continuous paragraph and on the side of the image in the modal in multiple lines.
I added multiple text properties to my components such as artist name, year, technique, and size.
To create the concatenation with the insertion of “,” between terms, I can use js but I imagine there might be a shortcut way to do it, similarly to using {acffield=my_field} for ACF fields.
Is there ?
Let me know,
Julien
PS: all tests using simply CSS inline haven’t been working well enough.
Depending on how you are outputting your properties you can use a modified version of this:
The CSS will work if you output your properties in span or p tags.
Obviously it was designed to work with Repeaters and Taxonomy Terms blocks so you will have to tweak the CSS and apply it to the container you want to use it for, but the general strategy should work seamlessly.
Thank you that is great to add the commas, but I have an issue with the inline-block
The various texts have various lengths, and the inline-block display still creates line returns that I don’t want.
The inline-block doesn’t make my text act like a regular text if know what I mean.
inline-block should behave like an inline element with no block wrapping. The only difference is you have greater control over styling and layout padding/margin/border, etc.
If you share the exact issue you are seeing perhaps the solution will present itself.
If for any reason you can’t use inline-block, you could just change it to inline, remove the padding-right and then change the content to be a comma followed by a non-breaking space. It’s not ideal but would probably be a reasonable alternative.
This is what I was hoping for at first but instead, I have
Artist, Title, Year,
Technique,
Size
While I look for something with line return based on the width of the div like
Artist, Title, Year, Technique, Size
As long as the content fits the width of the div it is fine but if it is longer it will go to the next line.
Currently, the comportment is not of a single paragraph but of blocks of text.
It is not clear why Technique and Size would wrap to next lines unless the containing element’s width is causing it to do so.
If the width of the container is not causing it to wrap then if you share a link to the front-end we can likely work out what is causing it very quickly.
I’m not sure what you mean by this, what you described sounds like the standard behaviour of inline elements, perhaps there is a distinction I am missing.
I understand now, you are dealing with longer strings of text. Then better to set it to display: inline. That seems to solve the issue if I am understanding correctly what you want to achieve.
