css 文本覆盖在另一段当我使用行高

c3frrgcw  于 2023-04-01  发布在  其他
关注(0)|答案(3)|浏览(87)

我的文字在p元素覆盖下一个p元素时,我用line-height到2 px,我是新的编码请帮助这里的代码

.main-section p{
    font-size: 16px;
    word-spacing: 1px;
    line-height: 2px;
    color: #252426;
  }
<section class="main-section" id="introduction">
            <h2>Introduction</h2>
            <p>JavaScript is a cross-platform, object-oriented scripting language....JavaScript is a cross-platform, object-oriented scripting language....JavaScript is a cross-platform, object-oriented scripting language....JavaScript is a cross-platform, object-oriented scripting language....word limit</p>
            <p>JavaScript contains a standard library of objects, such as Array...JavaScript contains a standard library of objects, such as Array...JavaScript contains a standard library of objects, such as Array...word limit</p>

段重写

ojsjcaue

ojsjcaue1#

只需删除line-height属性即可使其自动测量。

.main-section p{
    font-size: 16px;
    word-spacing: 1px;
    color: #252426;
  }
<section class="main-section" id="introduction">
            <h2>Introduction</h2>
            <p>JavaScript is a cross-platform, object-oriented scripting language....JavaScript is a cross-platform, object-oriented scripting language....JavaScript is a cross-platform, object-oriented scripting language....JavaScript is a cross-platform, object-oriented scripting language....word limit</p>
            <p>JavaScript contains a standard library of objects, such as Array...JavaScript contains a standard library of objects, such as Array...JavaScript contains a standard library of objects, such as Array...word limit</p>
</section>
iyfjxgzm

iyfjxgzm2#

行高不小于字体大小,如果小于字体大小,则重叠。

.main-section p{
    font-size: 16px;
    word-spacing: 1px;
    line-height: 16px;
    color: #252426;
  }
<section class="main-section" id="introduction">
            <h2>Introduction</h2>
            <p>JavaScript is a cross-platform, object-oriented scripting language....JavaScript is a cross-platform, object-oriented scripting language....JavaScript is a cross-platform, object-oriented scripting language....JavaScript is a cross-platform, object-oriented scripting language....word limit</p>
            <p>JavaScript contains a standard library of objects, such as Array...JavaScript contains a standard library of objects, such as Array...JavaScript contains a standard library of objects, such as Array...word limit</p>
sczxawaw

sczxawaw3#

line-height属性计算从第一行开始到下一行开始的间距,所以当你给予它1px时,当间距小于字体大小的高度时,它会重叠
您可以使用乘数值,如:

line-height: 1.2;

如果你想要1px行高,使用calc()函数:

line-height: calc(1 + 1px);

相关问题