Масштабируйте текст, чтобы он поместился в фоновое изображение

Я пытаюсь получить более длинные заголовки Wordpress, чтобы автоматически уменьшать их размер, чтобы вписаться в ширину фонового изображения (которое фиксировано на 986 пикселей). В настоящее время, когда заголовок слишком длинный, последние слова будут обрезаны ближе к концу предложения. См. Ниже сайт, например: http://www.nursingassistantdegree.com/earning-a-certified-nursing-assistant-degree-can-help-break-the-single-mom-poverty-cycle/Масштабируйте текст, чтобы он поместился в фоновое изображение

Код CSS приведен ниже.

.networkNews_bg{ background:url(images/network_news_bg.png) no-repeat 0 0; width:986px; height:82px;} 
.networkNews_bg h2{ font:bold 35px/82px "Myriad Pro"; color:#2a2c2e; padding:0 20px;}

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

Заранее спасибо.

источник

2013-06-07 user2441792

Вы не можете автомасштабировать текст в соответствии с указанной шириной. Вы можете перемасштабировать текст, используя «em», «rem» или другой относительный блок масштабирования текста, но все это изменяет высоту текста, а не его ширину. Вместо масштабирования, как насчет добавления автоматического эллипса в ваш заголовок?

.ellipsis { 
    text-overflow: ellipsis; 
    overflow: hidden; 
    width: 986px; 
    height: 20px; 
    line-height: 20px; 
}

Если заголовок заголовка расширяется до 986px, он отобразит «...» Это очень простое решение.

Уменьшение размера шрифта также рекомендуется, если это распространенная проблема.

EDIT:

Вот снимок из FF. Это то, что я добавил. Я не изменил свойства шрифта. Но вы можете уменьшить его, если хотите. Вам нужно 3 новых объекта: text-overflow, overflow, white-space. Белое пространство особенно важно.

Snapshot:

screen shot

Update 2:

networkNews_bg h2 { 
     text-overflow: ellipsis; 
     overflow: hidden; 
     wite-space: nowrap; 
     color: #2A2C2E; 
     font: 35px/82px "Myriad Pro"; 
     padding: 0 20px; 
}

источник

2013-06-07 15:35:45 ProfileTwist

согласился. Уменьшение размера шрифта, вероятно, является самым эффективным решением без изменения дизайна.Я не согласен с эллипсом, так как это подробная страница, и вы никогда не сможете увидеть полный заголовок, если это решение используется, но изменение размера шрифта и правильного управления контентом (не используя супер длинные заголовки), вероятно, Лучший. –

Согласен. Если это страница контента, то любой вырезанный текст не подходит. Тем не менее, я рекомендую текст с эллипсией IF, который нужно вырезать. Таким образом, пользователь, по крайней мере, знает. Вы всегда можете использовать javascript, чтобы показывать весь заголовок, когда курсор мыши на него нависает - но это может быть очень утомительным. – ProfileTwist

Спасибо вам обоим. Мне нравится идея многоточия. @ProfileTwist, где в моем файле CSS это должно идти? Я попытался установить его прямо под .networkNews_bg h2, но это не сработало. – user2441792

Вы должны изменить свой CSS для фона, чтобы быть

background: url(images/network_news_bg.png) bottom no-repeat;

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

источник

2013-06-07 14:38:26

Так уточнить @JosephMarikle, вы предлагаете, чтобы не связываться с текстом, но сделать фоновое изображение расширяться по вертикали вниз чтобы разместить текст? – user2441792

@ user2441792 Да. Извините, я не уточнил это. Изменение динамической ширины текста динамически просто требует, чтобы он разбился на различные браузеры. Шрифты не отображаются одинаково во всех браузерах, и это затрудняет масштабирование шрифтов. Наиболее распространенный подход - просто позволить контенту расширять его контейнер, делая его динамичным и адаптируемым к своей среде. –

ОК, что делает большой смысл @JosephMarikle. Спасибо за совет. Как мне написать CSS, чтобы повторить сверху вверх? Кроме того, он автоматически узнает, что повторить это, если текст слишком велик, чтобы быть на одной строке? – user2441792

Масштабируйте текст, чтобы он поместился в фоновое изображение

ответ

Смежные вопросы