Question

当浏览器缩小或移动设备上时，我的文字出现问题。 Here is a screenshot to help explain.在更大的屏幕上，匹配＆＃39;文字与＆＃39;是什么＆＃39;在同一行？所以没有问题。以下是我现在使用的代码。我希望这个差距与下面的那个“匹配”相同。提前谢谢。

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

只需在line-height: 1 div。

上添加.text-wrapper即可

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

您正在为文本使用两个段落，但在语义上它是一个段落：

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

这也是你问题的根源 - 你可以通过确保行高和边距/填充匹配来使用两个段来解决它 - 但使用单个段落会更好。

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中的其他一些样式造成的。无论如何请文字响应。

请为正文添加 font-size：100％，并使用媒体查询定位文字重叠的屏幕

例如， @media only screen and（min-width：320px）and（max-width：535px）{

//为text-wrapper p提供字体大小百分比，如果需要，还包括line-height

}

浏览器收缩时出现没有行间距的文本

4 个答案: