javascript - BigText 的垂直间距(行高)

Question

我正在尝试在动态容器上实现bigtext。我让它可以很好地与 fittext 配合使用，但我更喜欢调整 bigtext 的大小。

有人知道如何防止文本与bigtext重叠吗？

这是 HTML 测试代码:

<div id="fittextContainer" style="background-image: url({{=URL('static','images/tower.jpg')}})">
  <img class="imgTower" src="{{=URL('static','images/tower_.png')}}"/>
  <div id="fittext" class="containerText">
    Fittext. Make better decisions where location matters
  </div>
</div>

<div id="bigtextContainer" style="background-image: url({{=URL('static','images/tower.jpg')}})">
  <img class="imgTower" src="{{=URL('static','images/tower_.png')}}"/>
  <div id="bigtext" class="containerText">
    <span>BigText</span><span>Make better</span><span>decisions where location matters</span>
  </div>
</div>

这是CSS:

#fittextContainer {
    position: relative;
    width: 100%;
    height: auto;
    background-size: cover;
}

#bigtextContainer {
    position: relative;
    width: 100%;
    height: auto;
    background-size: cover;
}

.imgTower {
    width: 100%;
    height: auto;
}

.containerText {
    position: absolute;
    top: 25%;
    left: 0;
    right: 0;
    margin: auto;
    width: 80%;
    height: auto;
    text-align: center;
    color: white;
    line-height: 1em;
    font-weight: 700;
    opacity: 0.8;
    text-shadow: 3px 3px #3f51b5;
}

它是这样的:

Answer 1

您好。很难亲自测试它，因为我没有您的图像的测量值(如果您能写下来那就太好了)。首先，我建议您将 div 中的图像与 css 行集成:

background-image: url();

您还可以尝试使用一些填充，并且不要使用固定值(例如 x em)或有时代替 auto 的值。根据我的经验，汽车会把很多事情搞乱。

干杯，丹尼尔。