选择文本时叠加元素

Question

在本代码中当我选择输出文本时，我看到：

我该如何解决？

p {
  font-family: 'Cairo', sans-serif;
  line-height: 15px;
}

<link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet">
<p>
  Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla
</p>

Answer 1

这种情况正在发生，因为行高小于字体大小。因此，为了解决这个问题，请保持行高等于或大于font-size。

修改：设置显示：内联; 修复此问题。

请在此处查看。

p {
  font-family: 'Cairo', sans-serif;
  display: inline;
  line-height: 15px;
}

<link href="https://fonts.googleapis.com/css?family=Cairo">
<p>
  Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla
</p>

Answer 2

要解决此问题，请尝试提供比字体大小更多的行高度。在您的情况下，font-size默认为16 px，大于line-height。这就是重叠的原因。

检查一下：

＆＃13;

＆＃13;

p {
  font-family: 'Cairo', sans-serif;
  line-height: 25px;
  font-size:15px;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet">
<p>
  Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla Pla
</p>

＆＃13;

＆＃13;

＆＃13;