Html 对于视口来说过长时，文本在跨度中重叠

在我的网页的页眉上，文本对于视口来说过长时会重叠

这是HTML代码：

小鼠、fusilli和薄皮

这是CSS类内容头（我使用的是materialize.CSS框架，所以不用担心

cols12浅蓝色文本

和

text-darken-4

类。）

该类在标题前后添加一小行

这是我得到的输出：

---

当它没有足够的空间时，应该进行换行。

这是由于您的

行高：0.1em设置
.content header
：第二行的基线仅比第一行的基线低0.1米，导致文本换行时重叠。因此，将其更改为
行高：1.1或类似内容，至少对于低于一定宽度的屏幕，使用媒体查询


.content标题{
位置：相对位置；
文本对齐：居中；
边框底部：1px实心#020202；
线高：1.1；
利润率：0px 0 20px；
}
.内容标题范围{
背景色：#fff；
宽度：150px；
显示：内联块；
位置：相对位置；
顶部：1.1米；
}

小鼠、fusilli和薄皮
您使用的是Bootstrap吗？@j08691他使用的是
物化
。感谢您的快速回复。我想我在这里不清楚：我希望这一行在文本的左边和右边（在中间），就像我贴的图片一样。我告诉过你文本重叠的原因——这是你的问题。如果没有合理的行高设置，您将无法解决此问题…好的，因此我使用媒体查询删除边框并设置新的行高。这不是完美的，但很管用。谢谢
.content-header {
    position: relative;
    text-align: center;
    border-bottom: 1px solid #020202;
    line-height: 0.1em;
    margin: 10px 0 20px;
}

.content-header span {
    background-color: #fff;
}