[Решено!]Текст выходит из-за предела окошки pre

Сегодня мы научимся редактировать CSS-стиль шаблона Joomla таким образом, чтобы не выходил особенный текст из под тегов "<pre>Текст</pre>".

Часто, когда хотим выделить нужный нам текст из статьи мы используем тег pre. Во многих шаблонах Joomla, данный тег является стандартным, особенно те шаблоны которые разрабатываются профессиональными студиями типа YooTheme, Shape5, RocketTheme.

Вот как обычно выглядит данное выделение текста:

Вот как выглядит данное выделение если у нас строка очень длинная:

[Решено!]Текст выходит из-за предела окошки pre

Чтобы исправить данную проблему, нам достаточно добавить дополнение к CSS файлу шаблона. Переходим через админку в менеджер шаблонов и выбираем наш шаблон по умолчанию и редактируем нужный CSS-файл. Тег pre чаще всего прописан в CSS-файле typography.css а еще встречается в template.css.

Ищем данный тег в вышепредставленных CSS-файлов и после последнего параметра нажимаем "Enter/Ввод" и дополняем следующее строки:

white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
width: 500px; // Внимание!!! Ширину выбираем по себя

Как видите всё очень просто! Уверен у Вас получится, а если нет то не расстраиваетесь! Пишите в комментариях проблему, обязательно поможем.

TAGS: