Typically, when selecting text in a browser, words are combined if they are separated by whitespace in the HTML. For example, <span/> <span/> will be treated as separate words, while <span/><span/> will be combined.
However, I want my elements to have a specific amount of whitespace between them that is not affected by font choice or text layout.
Currently, when there is whitespace between elements, the gap is larger than intended due to the addition of a space character. When the elements touch, the spacing is correct, but double-clicking will highlight both words as one (e.g. FooBar).
Is there a way to ensure that text selection treats these as separate words without adding extra whitespace and maintaining the spacing specified in CSS? Additionally, can this separation be retained when copying to the clipboard?
.pad {
padding-left: 10px;
}<div>
<span>Foo</span>
<span>Bar</span>
(separate because there's whitespace)
</div>
<div>
<span>Foo</span><span>Bar</span>
(combined because there's no whitespace)
</div>
<div>
<span>Foo</span>
<span class="pad">Bar</span>
(separate words, but more space than I specified)
</div>
<div>
<span>Foo</span><span class="pad">Bar</span>
(can I make text selection treat these as separate words?)
</div>