html - 为什么在调整浏览器窗口大小时 h1 元素中的内容一直重叠？

Question

每次我调整浏览器窗口大小时，我的 h1 元素看起来像这样。

这是图片:

Image with broken h1

当我调整浏览器窗口大小时，h1 中的内容按预期中断，但顶行与句子的底行重叠。

这是代码:

<template lang = "html">

  <div>
<h1 class = ""> {{ Tex }}</h1>


  <div class = "container ">


              <div class = "row">

                <div class = "col-sm-6">
                        <h3><b>Connect Soft documents</b></h3>
                        <p class = "lead">Allow documents that feed into each other to provide a consistent, untainted view of the
                      financial, operational and social behaviour of the institution.</p>
                </div>

                <div class = "col-sm-4">
      <img src = "ConnectDocuments.png" alt = "Documents" class = "pull-right img-responsive imG" width = "250" height = "250">

                </div>

              </div>


      <hr>
              <div class = "row">
      <!-- position image to the right when on desktop,, but allow image to occupy the whole  webpage  when the device is less the 768px-->
                <div class = "col-sm-5">
        <h3><b>Improve decision models</b></h3>
        <p class = "lead">Use statistical modelling to identify patterns and anomalies in the data that can help in
        making better decisions.</p>
                </div>
                <div class = "col-sm-6">
                 <img src = "Statistics.png" alt = "Statistics" width = "350px" height = "270px"  class = "pull-right img-responsive imG">
                </div>

              </div>
      <hr>
              <div class = "row">

                <div class = "col-sm-6">
                    <h3><b>Search. Get what is important to You!</b></h3>
                    <p class = "lead">All notifications and documents are indexed and
                    archived so that you can find what is needed at all times.</p>
                </div>
                <div class = "col-sm-6">

                </div>

              </div>
      <hr>

              <div class = "row">

                <div class = "col-sm-5">
                  <h3><b>Collaborate with other apps!</b></h3>
                    <p class = "lead" >Connect to the tools you need to prevent wasting time using so many apps </p>
                  </div>

                <div class = "col-sm-7">

                  <img src = "Integrate.jpg" alt = "" width = "300" height = "270" class = "pull-right  img-responsive imG">

                </div>

              </div>


      </div>

  </div>
</template>

这是脚本元素

<script>
export default {
  name: 'Product',

  data() {
    return {
      Tex: 'Improve your execution',
    };
  },
};
</script>

这是样式元素

<style lang = "css" scoped>
    h1{ font-size: 55px; font-family: Heiti SC; text-align: center;   margin-top: 100px; }


/*Tablets */
@media screen and (max-width: 768px) {

  .imG {

      float: none !important;
      margin: auto;
      text-align: center;

  }

}

/* Mobile */
@media screen and (max-width: 480px ) {

}

</style>

Answer 1

尝试将以下 css 属性设置为您的 H1

line-height: < value >

示例:55px。值可以是 px(或)em(或)%