Question

每次我调整浏览器窗口大小时，我的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选择器：

h1{line-height:60px}

无论何时调整字体大小，都要记住设置新的行高。

Answer 2

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

line-height: < value >

示例：55px。值可以是px（或）em（或）％

Answer 3

提高行高。

h1{ font-size: 55px; font-family: Heiti SC; text-align: center; line-height:1.6em;  margin-top: 100px; }

当我调整浏览器窗口大小时，为什么我的h1元素中的内容会重叠？

3 个答案: