html - 选择文本时元素的叠加

在此代码中，当我选择输出文本时，会看到以下内容：



我该如何解决？

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>

最佳答案

要解决此问题，请尝试使行高大于font-size，在这种情况下，font-size默认为16 px，大于line-height，这就是为什么重叠的原因。

看一下这个：

p {
  font-family: 'Cairo', sans-serif;
  line-height: 25px;
  font-size: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>