如何阻止CSS覆盖文本 [英] How to stop css from overlaying text
本文介绍了如何阻止CSS覆盖文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
也许这是一个非常愚蠢的问题，但是当我尝试增大字体大小时如何停止css的覆盖?
Maybe this is a really dumb question but how do I stop css from overlaying when I'm trying to bigger the font size?
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
html{
height: 100%;
}
body{
font-family: 'Fjalla One', sans-serif;
background: #2C3E50; /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.container{
margin: auto;
}
h1{
text-transform: uppercase;
font-size: 60px;
line-height: 47px;
letter-spacing: 2px;
text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
text-align: center;
}
.title{
transform: translateX(-50%) rotate(-5deg);
display: block;
margin-left:50%;
}<body>
<!--Titel-->
<section class="container">
<h1>
<br />
<span class="title" >
<label style="color:#e55643;">Burger</label><label style="color:#2b9f5e;">school</label>
</span>
<span class="title" style="color:#f1c83c;">afspraken</span>
</h1>
</section>
</body>非常感谢您的帮助.我才刚刚开始，所以也许这是一个非常愚蠢的问题.
Thanks on advance for the help. I'm just started so again maybe this is a really dumb question..
推荐答案
You have to adjust the line-height as well, e.g. set it like the font-size to 60px. The text overlaps, if the line-height is to small for a given font-size.
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
html {
height: 100%;
}
body {
font-family: 'Fjalla One', sans-serif;
background: #2C3E50;
/* fallback for old browsers */
background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #4CA1AF, #2C3E50);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.container {
margin: auto;
}
h1 {
text-transform: uppercase;
font-size: 60px;
line-height: 60px;
letter-spacing: 2px;
text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
text-align: center;
}
.title {
transform: translateX(-50%) rotate(-5deg);
display: block;
margin-left: 50%;
}<section class="container">
<h1>
<span class="title">
<label style="color:#e55643;">Burger</label><label style="color:#2b9f5e;">school</label>
</span>
<span class="title" style="color:#f1c83c;">afspraken</span>
</h1>
</section>这篇关于如何阻止CSS覆盖文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
