CSS - 修复 H3 在移动设备、平板电脑上的重叠

Question

我正在开发一个带有 Avada WordPress 主题的网站。 <h3> 与 title-heading-center 类在移动设备和平板电脑大小之间重叠：

如您从屏幕截图中看到的那样，我已尝试向此类添加多种样式：

word-break: break-all;
word-wrap: break-word;
display: block;
overflow: hidden;
word-break: break-word;
line-height: 33px;

似乎唯一有用的是word-break: break-word，它将内容集中在移动设备上。

我可以应用哪些其他 CSS 样式来在 <h3> 标题中的单词之间创建间距？

Answer 1

尝试将其更改为 line-height: 33px !important 而不仅仅是 line-height: 33px。虽然不建议您保持这种方式，但值得尝试看看这是否是问题所在。请注意，在您的开发者工具屏幕截图中，此属性当前已被划掉，因此被忽略。

或者，尝试使用 fusion-title 类更改其容器 div 的高度。那里的某个地方可能有一个容器 div，它阻止了正确的单词line-height。