CSS по-разному форматировать строки 1 и 2 моего h1? & изменить положение разрыва строки - PullRequest
Новая
       28

CSS по-разному форматировать строки 1 и 2 моего h1? & изменить положение разрыва строки

1 голос
/ 01 февраля 2012

Привет! Я использую виджет постов в WordPress, и он показывает мой заголовок h1 на 2 строки.Однако я хочу изменить поле или разрывы строк так, чтобы вместо «Рабочее место Травма» в первой строке и «Предотвращение» во второй строке, было бы «Рабочее место» в первой строке и «Предотвращение травм» во второй.

Любые идеи.Я пытался использовать команду первой строки psuedo, но не повезло, т.е. 

#home-header-right .featuredpage .post-7  h2:first-line,
#home-header-right .featuredpage .post-20  h2:first-line, 
#home-header-right .featuredpage .post-7  a:first-line,
#home-header-right .featuredpage .post-20  a:first-line  {
    padding: 0 50px 0 0;
}

Ответы [ 2 ]

2 голосов
/ 01 февраля 2012

Выделение текста, выделенного с помощью :first-line, является блоком текста на уровне строки, к которому нельзя применять отступы и поля.Вы можете попробовать установить display: block, чтобы увидеть, работает ли он, но что касается W3C Wiki , вы можете использовать только следующие свойства CSS для этого текста:

  • font свойств, color, background свойств, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform и line-height
0 голосов
/ 01 февраля 2012

Если вы хотите разбить текст на первое слово, я рекомендую вам просто обернуть его в другой элемент: 

<h1><span>Workplace</span> Injury Prevention</h1>

h1 span {
    display: block;
}

Пример: http://dabblet.com/gist/1714493

ДополнительнаяЭлемент не является семантическим, но менее жестким, чем жестко заданный <br>, и более надежным, чем попытка связываться с псевдоэлементом :first-line.

Редактировать: Если выне могу использовать HTML в заголовках сообщений и не возражаю против использования небольшого количества jQuery, вы можете динамически переносить текст следующим образом: 

(function($) {
    $('h1:contains(Workplace Injury Prevention)')
        .html(function(i, html) {
            return html.replace('Workplace', '<span>Workplace</span>');
        });
    ;
})(jQuery);

Пример: http://jsfiddle.net/deZKd/

Для этогоэто для других заголовков сообщений, вам нужно что-то более общее: 

(function($) {
    $('h1')
        .html(function(i, html) {
            return html.replace(/^(\w+)\b/, '<span>$1</span>');
        });
    ;
})(jQuery);

Пример: http://jsfiddle.net/deZKd/1/

(Имейте в виду, что в обоих этих примерах вы захотите изменить селекторсопоставлять только заголовки сообщений в виджете, например #recent-posts-widget h1:contains(…).)

...