Prevent multiple html elements' selection on doubleclick

Question

When I doubleclick on the text "five", all the other elements also get selected. For e.g. copy/paste results in "OneTwoThreeFourFive". And they don't even get deselected easily!

How can I avoid this multiple text selection behaviour ?

      .App {
        position: relative;
        text-align: center;
        height: 3em;
        width: 20em;
        box-sizing: border-box;
      }
      .item {
        position: absolute;
        top: 0;
        height: 3em;
        width: 5em;
        background-color: darkseagreen;
        border: 1px solid green;
        pointer-events: none;
      }
      .one {
        left: 0;
      }
      .two {
        left: 5em;
      }
      .three {
        left: 10em;
      }
      .four {
        left: 15em;
      }
      .five {
        left: 20em;
      }

    <div class="App">
      <div class="item one">One</div>
      <div class="item two">Two</div>
      <div class="item three">Three</div>
      <div class="item four">Four</div>
      <div class="item five">Five</div>
    </div>

Answer 1

I just encountered this problem, and I solved it by putting display: inline-table on my (my equivalent of) the item elements.

      .App {
        position: relative;
        text-align: center;
        height: 3em;
        width: 20em;
        box-sizing: border-box;
      }
      .item {
        position: absolute;
        top: 0;
        height: 3em;
        width: 5em;
        background-color: darkseagreen;
        border: 1px solid green;
        display: inline-table;
      }
      .one {
        left: 0;
      }
      .two {
        left: 5em;
      }
      .three {
        left: 10em;
      }
      .four {
        left: 15em;
      }
      .five {
        left: 20em;
      }

    <div class="App">
      <div class="item one">One</div>
      <div class="item two">Two</div>
      <div class="item three">Three</div>
      <div class="item four">Four</div>
      <div class="item five">Five</div>
    </div>

Apparently putting the elements in table mode is enough of a hint to Chrome that the text in the element is separate from the text around it. There are other hacks that also work, such as:

  .item:before {
    content: "";
    display: block;
  }

(putting an invisible line break at the start of the item)