Replace spaces with bullet signs with plain css

Question

I wanted to add the bullet sign (•) instead of the spaces to separate words; this could be easy to achieve with JavaScript but can we do this with plain CSS?

Here's the code:

<p class="text">lorem ipsum dolor sit amet</p>
<!-- the styled text should be like "lorem•ipsum•dolor•sit•amet" -->

<style>

p.text {
  /* style */
}

</style>

Answer 1

Easiest way that comes to my mind is using HTML entity code for bullet circle •, which you insert between each word. So no CSS needed just HTML. Not sure if that's helpful for you.

You can do it like so:

<p class="text">lorem&bull;ipsum&bull;dolor&bull;sit&bull;amet</p>

and you would get:

lorem•ipsum•dolor•sit•amet