ブラウザウィンドウのサイズを変更すると、h1要素のコンテンツが重複して表示されるのはなぜですか？

Question

各回ブラウザウィンドウのサイズを変更すると、h1要素は次のようになります。

これはイメージです。

Image with broken h1

それが必要なく、一番上の行は、文の一番下の行と重なるように私は、ブラウザのウィンドウにH1の休憩中にコンテンツのサイズを変更する場合。

これはコードです：これはscript要素

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

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

ある

<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> 

これは、スタイル要素

<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

してみてください。値はpx（または）em（または）％

Answer 2

があなたのCSSのH1セレクタに次の行を追加します：

h1{line-height:60px} 

フォントをサイズ変更するたびに、新しい線高を設定することを忘れないでください。 55×：あなたのH1

line-height: <value> 

例に以下のCSSプロパティを設定するために

Answer 3

行の高さを増やすことができます。

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