Text Stacking Over Self

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, а не размер окна. Поэтому изменение окна не повлияет на него, но изменение размера шрифта будет (желательно).