Html 头元素在其自身上写入

我经常遇到标题文本覆盖自身的CSS问题，如下所示：

CSS:

html

我们的产品
Lorem Ipsum只是印刷和排版行业的虚拟文本。

---

如何使其正确包装？

删除

行高：1px

：

h3{
字体系列：“Girasol”，草书；
字体大小：40px；
单词break：打破一切；
文本溢出：省略号；
}

我们的产品
Lorem Ipsum只是印刷和排版行业的虚拟文本。

寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的格式。看见

h3{
  font-family: 'Girassol', cursive;
  font-size: 40px;
  line-height: 1px;
  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>