文本堆叠在自己

Question

我正在使用模板开发一个网站，由于某种原因，当我缩小窗口大小时，左下角的文本会自动堆叠。我绝不是HTML / CSS方面的专家，但我似乎无法弄清楚为什么会这样做。我试过搞乱div属性和z-index。看起来像这样

我的HTML代码：

<!-- Site Logo -->
    <div id="logo">salem music</div>

CSS：

#logo {
font-family: 'Coustard', serif;
font-size: 49px;
bottom:40px;
height:auto;
left:40px;
position:absolute;
width:20%;
z-index:1000;
color: #fff;
}

我希望它看起来像

Answer 1

width设置为20%。如果减小窗口宽度，那么最终#logo元素的宽度将变得太小并导致文本换行。

考虑设置更大的width值。

.logo {
  background-color: grey;
  margin: 10px;
}
.logo1 {
  width: 5%;
}
.logo2 {
  width: 75%;
}

<div class="logo logo1">This width is too small and will wrap</div>
<div class="logo logo2">This width is better and won't wrap</div>

或者，如果您想保持该宽度，并希望允许文本溢出<div>，则可以使用white-space: nowrap。但是，我不建议这样做，因为它可能会重叠它旁边的链接。

.logo {
  background-color: grey;
  margin: 10px;
}
.logo1 {
  width: 5%;
}
.logo2 {
  width: 5%;
  white-space: nowrap;
}

<div class="logo logo1">This width is too small and will wrap</div>
<div class="logo logo2">This will not wrap even though it is too small</div>

@Bálint也在评论中提出了一个很好的观点：如果可能，请使用em单位进行测量而不是百分比。 ems are based on font size，而不是窗口大小。因此，更改窗口不会影响它，但更改字体大小（以理想的方式）。