Text erscheint ohne Zeilenabstand, wenn der Browser geschrumpft ist

Question

Ich habe ein Problem mit meinem Text, wenn der Browser geschrumpft ist oder auf einem mobilen Gerät. Here is a screenshot to help explain. Auf einem größeren Bildschirm ist der "übereinstimmende" Text in der gleichen Zeile wie "was ist", so dass es kein Problem gibt. Unten ist der Code, den ich gerade benutze. Ich würde mir wünschen, dass die Lücke die gleiche wie die unter "Übereinstimmung" ist. Danke im Voraus.

HTML

<div class="outer-wrapper"> 

<img class="aligncenter wp-image-1015" 
src="https://www.thesurebettor.com/wp-content/uploads/2017/05/what-is- 
matched-betting-1.jpg" alt="" width="750" height="431" /> 
<div class="text-wrapper"><p>What is matched</p><p>betting?</P> 

</div> 
</div> 

CSS

.aligncenter { 
    display: block; 
    margin: auto; 
    max-width: 100%; 
    height: auto; 
} 

.outer-wrapper { 
    position: relative; 
} 

.text-wrapper { 
    position: absolute; 
    left: 50%; 
    top: 35px; 
    transform: translateX(-90%); 
    color: white; 
    font-size: 52px; 
    font-weight: bold; 
} 

Answer 1

Sie verwenden zwei Absätze für den Text, aber semantisch ist es ein Absatz:

<p>What is matched betting?</p> 

Dies ist auch die Wurzel des Problems - Sie können es lösen mit zwei Absätze, indem Sie sicherstellen, dass die Zeilenhöhe und die Ränder/Abstände übereinstimmen - aber die Verwendung eines einzigen Absatzes wäre besser.

Answer 2

Fügen Sie einfach line-height: 1 auf .text-wrapper div.

.aligncenter { 
 
    display: block; 
 
    margin: auto; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
.outer-wrapper { 
 
    position: relative; 
 
} 
 
.text-wrapper { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 35px; 
 
    transform: translateX(-90%); 
 
    color: white; 
 
    font-size: 52px; 
 
    font-weight: bold; 
 
    line-height:1; 
 
}

<div class="outer-wrapper"> 
 
    <img class="aligncenter wp-image-1015" 
 
src="https://www.thesurebettor.com/wp-content/uploads/2017/05/what-is- 
 
matched-betting-1.jpg" alt="" width="750" height="431" /> 
 
    <div class="text-wrapper"><p>What is matched</p><p>betting?</p></div> 
 
</div>

Answer 3

Sie haben falsches HTML geschrieben. bitte mach es richtig.

.aligncenter { 
 
    display: block; 
 
    margin: auto; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
.outer-wrapper { 
 
    position: relative; 
 
} 
 

 
.text-wrapper { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 35px; 
 
    transform: translateX(-90%); 
 
    color: white; 
 
    font-size: 52px; 
 
    font-weight: bold; 
 
}

<div class="outer-wrapper"> 
 

 
<img class="aligncenter wp-image-1015" 
 
src="https://www.thesurebettor.com/wp-content/uploads/2017/05/what-is- 
 
matched-betting-1.jpg" alt="" width="750" height="431" /> 
 
<div class="text-wrapper"><p>What is matched</p><p>betting?</p></div> 
 

 
</div>

Answer 4

Click here for the Snapshot

Ihr Problem ist von meinem Ende nicht reproduzierbar, die oben Snapshot überprüfen. Es kann wegen einiger anderer Styling in Ihrem CSS verursacht werden. Wie auch immer bitte machen Sie Text reagiert.

Bitte nehmen font-size: 100% für den Körper und verwenden Abfrage Medien den Bildschirm zielen, wo der Text

überlappende ist

zB @media nur Bildschirm und (min. -Breite: 320 Pixel) und (max-width: 535px) {

// geben Schriftgröße in Prozent für Text-Wrapper-p und, wenn erforderlich, enthalten Zeilenhöhe sowie

}