Formatting Text in Webflow

Comma-Separated List Items

No items found.

Give your Collection List a custom attribute of wfu-csv, and drop in an HTML embed with this style;


<style>
[wfu-csv] .w-dyn-item {
    display: inline;
}
[wfu-csv] .w-dyn-item div,
[wfu-csv] .w-dyn-item p {
    display: inline;
}
[wfu-csv] .w-dyn-item:not(:last-child) div::after,
[wfu-csv] .w-dyn-item:not(:last-child) p::after {
    content: ", ";
}
</style>

This will append a comma after each paragraph, except the last one.

See demo site and read-only project link.

Overview
Formatting Text Elements
Formatting Numbers & Currencies
6:09
210
Truncating Text w/ Ellipsis
220
Isolating Bold & Italic Styles in Headings & Text
4:26
221
Emojis & Line-Breaking
2:28
223
Fitting Text Exactly
224
Highlighting Text
225
Formatting Dates & Times
Formatting Dates
4:50
251
Formatting Collection Lists
Comma-Separated List Items
7:15
310
Formatting Rich Text Elements
Formatting Rich Text Elements
410
Formatting CMS-Bound Rich Text Elements
420
Add a Highlighting & Code Effect to Rich Text
7:03
425
Nested Lists in Rich Text Elements
2:37
430
No items found.
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.