html - 覆盖自身的标题元素

Question

我总是遇到标题文本覆盖自身的 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>
       

我怎样才能让它正确包装？

标签： htmlcssheader

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>