I recently encountered an issue while troubleshooting some HTML code. I needed to provide form data that customers could easily copy and paste. Normally, customers would double-click on the identifier and press CTRL-C. Here is how I initially formatted my code:
<label>Identifier</label><div>ABCD1234</div>
<label>Description</label><div>Some descriptive words</div>
Everything was fine until the Description needed to wrap and not below the label. To address this, I incorporated some CSS inline styling.
<style>
.fixform label { min-width: 76px; }
.fixform div { display: inline-block; width: 210px; padding-bottom: 3px; }
</style>
<div class="fixform">
<label>Identifier</label><div>ABCD1234</div>
<label>Description</label><div>Some descriptive words</div>
</div>
However, this caused an issue where double-clicking the identifier selected both the identifier and the preceding word "Identifier". Similarly, clicking "Description" highlighted both "Description" and "Some". It seems that using "inline-block" treats the last word of the label and the first word of the div as a single unit.
To resolve this, I added a space at the end of the text inside the label. But I feel like this solution is somewhat makeshift. Is there a better way to present labeled content with word-wrapping in columns without encountering the peculiar double-click behavior in Chrome?