An Unusual Situation
Encountering a strange problem that I need help resolving. Within my code, there are two spans positioned alongside each other. The issue arises when attempting to select the last word in the first span, as it inevitably selects the first word in the following span.
To better illustrate the problem, here is a JSFiddle showcasing the scenario: https://jsfiddle.net/b7mybsLr/1/
Attempts at Resolution
In search of solutions online, I came across one that showed promise by applying the CSS rule:
user-select: all;This method did resolve the initial issue, yet led to a new problem where clicking on the text highlights all the content within the span, which does not align with my desired outcome.
Further experiments included adding:
display: inline-block;Unfortunately, this adjustment proved ineffective as evidenced by the demonstration.
An alternative fix involved appending ' ' to the end of each line, which successfully corrected the issue. However, this approach is not preferable for our codebase.
Lastly, I attempted substituting the spans with divs, but as shown in the jsfiddle, the problem persisted. Uncertain if this stems from a React rendering complication or an underlying CSS issue - any guidance would be greatly appreciated.