英文:
Text over picture can only be in one word. When it@s two words or more, the second word drop down and slightly overlaps the first word
问题
I have a picture as a background and a h2 header above the picture. But I cant have headings with more than one word without the second word dropping down.
不明白为什么会这样，以及如何修复它。
#forsidebilde {
width: 100%;
height: auto;
}
#showcasetittel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
min-height: 300px;
font-size: 5em;
z-index: 1;
}
<div class="showcase">
<img id="forsidebilde" src="bilder/forsidebilde.jpg" alt="Bilde av fjell og fjord.">
<h2 id="showcasetittel">Velkommen</h2>
</div>
<section id="main">
英文:
I have a picture as a background and a h2 header above the picture. But I cant have headings with more than one word without the second word dropping down.
Not sure why it does this and how to fix it.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#forsidebilde {
width: 100%;
height: auto;
}
#showcasetittel {
position: absolute;
top: 50‰;
left: 50%;
transform: translate(-50%, -50%);
color: white;
min-height: 300px;
font-size: 5em;
z-index: 1;
}
<!-- language: lang-html -->
<div class="showcase">
<img id="forsidebilde" src="bilder/forsidebilde.jpg" alt="Bilde av fjell og fjord.">
<h2 id="showcasetittel">Velkommen</h2>
</div>
<section id="main">
<!-- end snippet -->
答案1
得分: 0
使用浏览器的检查元素工具，您应该能够看到您的h2的宽度。我有一种感觉，它会强制换行，因为元素无法扩展以容纳一行文字，所以它在空格处断开。您可以尝试在h2单词之间使用 特殊字符代码，以防止它换行到两行。
我认为文本重叠的原因是因为行高属性小于文本的高度。尝试使用不同的行高进行实验，看看是否有帮助。
英文:
Using your browser's Inspect Element tool, you should be able to see the width of your h2. I have the feeling it's forcing a line break because the element isn't able to expand to contain the text on one line, so it breaks the line at the space. You might be able to use the &nbsp; special character code between the h2 words to prevent it from breaking onto two lines.
The reason the text is overlapping is, I believe, because the line-height property is less than the height of the text. Try experimenting with different line heights to see if that helps.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论