Header 个元素覆盖自身

Question

我总是运行遇到 header 文本覆盖自身的 CSS 问题，如下所示：

CSS:

h3{
  font-family: 'Girassol', cursive;
  font-size: 40px;
  line-height: 1px;
  word-break: break-all;
  text-overflow: ellipsis;
}

html

  <h2 className="home-product-topic-h2">Our Products</h2>
    <h3 >
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
   </h3>

我怎样才能正确包装它？

Answer 1

删除line-height:1px:

h3 {
  font-family: 'Girassol', cursive;
  font-size: 40px;
  word-break: break-all;
  text-overflow: ellipsis;
}

<h2 className="home-product-topic-h2">Our Products</h2>
<h3>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</h3>

Header 个元素覆盖自身

Header elements writing over itself

html

css

header