停止选择到多行页面的边缘

Posted 2023-03-06

【中文标题】停止选择到多行页面的边缘

【英文标题】：Stop selection going to edge of page on multiple lines

【发布时间】：2014-09-08 18:38:22

【问题描述】：

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

你是怎么做到的，这样它就不会穿过页面，如下图所示？

我的代码：

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://***.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;

【问题讨论】：

可能重复：***.com/questions/8239129/…

我猜你可能是对的。我只是尝试了那里的例子，它在一定程度上有效

【参考方案1】：

您必须使用某种块标记，例如<div> 来放入文本。亮点只会与文本所在的 div 一样大。

【讨论】：

里面全都包好了，但还是超出了

嗯，我会继续调查的。那应该行得通。你用的是什么浏览器？

Chrome 和 Firefox。我将编辑问题以显示代码

已编辑完全不确定我做错了什么。这样一个菜鸟问题，但我以前从来没有真正需要这样做

啊，是的，他是对的。我添加了位置：相对；到 .maintext，它现在可以工作了。