Всем доброго дня. есть небольшой вопрос. Есть текст "Информация о доставке" При зуммировании сайта в любом из браузеров этот текст начинает выглядеть не в одну строчку а в 2 или того хуже переносится из-за чего начинает криво отображаться код. Возможно ли с помощью каких либо инструментов PHP HTML или CSS сделать так чтобы при зуме страницы текст заменялся другим либо просто то что не влезает сокращалось до троеточия... Вот как всё на деле происходит.
Нормально:
Небольшой Zoom:
Большой Zoom:
Вот как это прописано в коде:
<center style="margin-top: 7px;">
<div class="head_cont"><img src="/image/data/forWelcome/phone.png" alt="Телефон для связи с нами"><span style="padding: 0 10px 0 5px; vertical-align: 10px;"> <span style="color: red;"></span></span></div>
<div class="head_cont"><a href="mailto:info@test.ru" target="_blank" title="Написать нам"><img src="/image/data/forWelcome/mail.png" alt="Отправить письмо"><span style="color: #222222; padding: 0 10px 0 5px; vertical-align: 10px;">info@test.ru</span></a></div>
<div class="head_cont_delivery"><a href="http://test.ru/delivery" title="Информация о доставке"><img src="/image/data/forWelcome/dostavka.png" alt="Доставка"><span style="color: #222222; padding: 0 10px 0 5px; vertical-align: 10px;">Информация о доставке</span></a></div>
И в файле стилей:
.head_cont {
font-family: 'PT Sans', sans-serif;
font-size: 12px;
font-weight: bold;
font-style: normal;
text-transform: none;
display: inline;
}
.head_cont_delivery {
font-family: 'PT Sans', sans-serif;
font-size: 12px;
font-weight: bold;
font-style: normal;
text-transform: none;
display: inline;
width: 100px;
height: 40px;
overflow: hidden;
}