У меня есть контейнер, в который я пишу текст внутри; код выглядит следующим образом:
#webdd {
overflow: scroll;
width: 100%;
max-width: 100%;
max-height: 50%;
margin-top: 30%;
word-wrap: break-word;
text-align: center;
display: block;
}
#headerw {
font-size: 16px;
opacity: 0.9;
font-family: globerb;
font-weight: bold;
margin-bottom: 0px;
color: #333;
z-index: 9;
}
#descw {
margin-left: 30px;
margin-right: 30px;
font-size: 13px;
opacity: 0.6;
font-family: globerb;
font-weight: normal;
margin-top: 0px;
color: #333;
text-shadow: none;
text-align: justify;
z-index: 9;
}
Проблема в том, что страница специально предназначена для мобильных телефонов, а когда кто-то имеет небольшую высоту, текст переходит в свиток (который не отображается на мобильных телефонах), я хочу что-то, что может сделать текст меньшим, или.. обернуть его в некоторые манера. #webdd - мой главный контейнер, остальные headerw - заголовок, а descw - описание.
Есть идеи?
Используйте медиа-запросы, которые изменят размер текста в соответствии с высотой контейнера.
@media screen and (max-width: 995px) , screen and (max-height: 700px) {
font-size:1.25em;
}
И другие такие комбинации размеров экранов, которые вы предназначаете для поддержки.