When I'm generating codes and things I expect the user to copy/paste, I often output it inside an <input> or <textarea> to make it simpler to focus the element, select all, and copy—rather than making the user carefully select the start and end points of the selection with the mouse (or their finger on mobile). But, I'm not usually adding visual spaces in.
If I needed to display 'chunks' of a generated code, but wanted the spaces to be gone when copied there are 2 routes you could explore:
I haven't done much with the JS clipboard API, so I'm not sure what that demo would look like, but I do have an idea for the second one:
<div id=output>
<span>0123</span><span>4567</span><span>89ab</span><span>cdef</span>
</div>
<style>
#output {
padding: 1em;
border: 1px solid black;
}
#output span + span {
margin-left: .5em;
}
</style>
Here we have a <div> element that is filled with text, wrapped in chunks using <span> tags. For CSS all I've done is put some spacing and border around the containing element so you can see where it is, and any time there is a <span> tag followed by another <span> tag inside our <div id=output> it will add a left margin to add some space between them. Hopefully this makes sense <3
Daniel J Dominguez