Вертикальное выравнивание текста в DIV - адаптивный размер текста

Question

У меня есть сайт WordPress, и я пытаюсь разместить текст поверх изображения слайдера.

Я жестко запрограммировал одно статическое изображение полной ширины в моем виджете слайдера, используя следующий CSS.

.slider-wide {
clear: both;
width: 100%;
height: 560px;
    background: url(http://photourl);
background-position: center;
background-repeat: no-repeat;
background-size: cover; 

}

Теперь по вопросу. В то время как текст выглядит красиво на широком экране, когда окно браузера уменьшается или при просмотре с мобильного телефона, текст переполняет изображение слайдера и переполняет другие виджеты.

Есть ли способ заблокировать этот текст только в виджете слайдера? Адаптивный размер текста как-нибудь?

Answer 1

Да, для текстов вы можете использовать "отзывчивый" размер текста, если вы используете единицы просмотра.

Одним из поддерживаемых значений для этого вида единиц измерения является процентное значение, основанное на ширине, высоте контейнера или обоих показателях... Вот пример концепции: http://jsfiddle.net/t7b8ytrq/

{
    font-size: 2vh; /* size based on container's height */
    font-size: 2vw; /* size based on container's width */
    font-size: 2vmin; /* size based on witchever is smaller (width or height) */
    font-size: 2vmax; /* size based on witchever is higher (width or height) */
}

Читайте о спецификациях здесь: http://dev.w3.org/csswg/css-values/