當瀏覽器縮小時出現無空行的文本

Question

當瀏覽器縮小或在移動設備上時，我的文本出現問題。 Here is a screenshot to help explain.在較大的屏幕上，'匹配'文本和'what'是一樣的，所以沒有問題。以下是我現在使用的代碼。我希望差距與下面的'匹配'相同。提前致謝。

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

您正在使用兩個段落文本，但在語義上它是一個段落：

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

這也是你的問題的根源 - 您可以使用解決它兩段通過確保線條高度和邊距/填充匹配 - 但使用單個段落會更好。

Answer 2

剛上.text-wrapper格添加line-height: 1。

.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

你寫錯了html。請把它改正。

.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

您的問題是不可複製的，從我的結束，檢查上面的快照。 這可能是由於您的CSS中的其他樣式造成的。無論如何 請讓文字響應。

請包括字體大小：用於體 100％和使用媒體查詢來定位屏幕，其中文本重疊

例如， @media只有屏幕和（分鐘。 -width：320）和（最大寬度：535px）{

//給字體大小以百分比爲文本包裝p和如果需要的話包括行高以及

}