html - 防止在双击时选择多个 html 元素

Question

当我双击文本“五”时，所有其他元素也被选中。例如复制/粘贴结果为“OneTwoThreeFourFive”。而且他们甚至不会轻易取消选择!

如何避免这种多文本选择行为？

      .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

我刚遇到这个问题，我通过将 display: inline-table 放在我的(我的等价物)item 元素上解决了这个问题。

      .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>

显然，将元素置于表格模式足以向 Chrome 提示元素中的文本与其周围的文本是分开的。还有其他一些技巧也可以使用，例如:

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

(在元素的开头放置一个不可见的换行符)