停止选择在多行上转到页面边缘

Question

当突出显示要复制的文本时，选择每一行时蓝色选项会遍历整个页面（如下图所示）

如何制作它以便它不会穿过页面，如下图所示？

我的代码：

HTML：

<div class="maintext">

Welcome/logo

    <div class="headtab">
    About
    </div>

    <p class="info">

   SOME CONTENT

    </p>

  <div class="headtab">
  Requests
  </div>
  <p class="info">
  More content
  </p>

</div>

然后是CSS：

.maintext {
    background-color: #FFF;
    width: 950px;
    align: center;
    padding-top: 50px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-right: 70px;
    padding-left: 70px;
    padding-bottom: 100px;
    display: block;
}
p.info {
    font-family: 'Josefin Slab', serif;
    font-size: 22px;
    color: #000;
    font-weight: 200;
    line-height: 150%;
    word-wrap:break-word;
    display: block;
}
.headtab {
    margin-left: -110px;
    z-index: 20;
    background-color: #FF8100;
    height: 30px;
    width: 120px;
    line-heihgt: 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 24px;
    color: #FFF;
    text-decoration: underline; 
    /* The following stopping of text selection is from: http://stackoverflow.com/questions/7018324/how-do-i-stop-highlighting-of-a-div-element-when-double-clicking-on */
-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

Answer 1

您必须使用某种块标记（例如<div>）来放置文本。突出显示只会与文本所在的div一样大。