Question

在这个例子中，我可以使用line-height和height来删除文本上方和下方的空白区域。

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
span {
    font-size: 50px;
    font-weight: 600;
    font-family: 'Roboto';

    display: inline-block;
    vertical-align: top;
    height: .75em;
    line-height: .75em;

    background-color: gold;
}

.noselect{
  user-select: none;
}

.upper{
  font-size:20px;
  position:relative;  //EDIT 2
}

.lower::selection { background: none; } //EDIT 1

＆＃13;

<div><span class='upper'>UPPER</span></div>
<div><span class='lower'>LOWER</span></div>

＆＃13;

但是，当我选择文字＆＃39; LOWER＆＃39;时，突出显示的部分将覆盖“上层”的部分内容。文本。因此，在这部分中，UPPPER文本被覆盖，我无法选择上部文本。

有没有办法防止这种情况发生。我考虑过使用z-index将UPPER文本放在最上面，但这只能使用行高来实现吗？或者其他任何方式？

我还尝试使用user-select: none来阻止文本选择，但这样可以防止任何文本被选中，即使是突出显示的区域也是如此。

由于

编辑：将.lower::selection { background: none; }和position:relative;添加到.lower可以实现此功能。

Answer 1

在评论中进行讨论之后，我使用::selection { background: none; }与OP使用position: relative的提议在此特定情况下解决了此问题：

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
span {
  font-size: 50px;
  font-weight: 600;
  font-family: 'Roboto';
  display: inline-block;
  vertical-align: top;
  height: .75em;
  line-height: .75em;
  background-color: gold;
}

.noselect {
  user-select: none;
}

.upper {
  font-size: 20px;
  position: relative;
}

.lower::selection {
  background: none;
}

＆＃13;

<div><span class='upper'>UPPER</span></div>
<div><span class='lower'>LOWER</span></div>

＆＃13;

突出显示时删除文本上方/下方的空格

1 个答案: