CSS: первое письмо не работает

Я пытаюсь применить стили CSS к некоторым фрагментам HTML, которые были сгенерированы из документа Microsoft Word. HTML, созданный Word, является довольно жестоким и включает в себя множество встроенных стилей. Это происходит примерно так:

<html>
    <head></head>
    <body>
        <center>
            <p class=MsoNormal><b style='mso-bidi-font-weight:normal'><span
               style='font-size:12.0pt;line-height:115%;font-family:"Times New Roman"'>Title text goes here<o:p></o:p></span></b></p>

            <p class=MsoNormal style='margin-left:18.0pt;line-height:150%'><span
                style='font-size:12.0pt;line-height:150%;font-family:"Times New Roman"'>Content text goes here.<o:p></o:p></span></p>
    </body>
</html>

... и очень просто, я хотел бы создать первую букву заголовка. Он просто должен быть большим и другим шрифтом. Для этого я пытаюсь использовать селектор :first-letter, с чем-то вроде:

p b span:first-letter {
    font-size: 500px !important;
}

Но он, похоже, не работает. Вот скрипка, демонстрирующая это:

http://jsfiddle.net/KvGr2/

Любые идеи, что не так/как правильно получить первую букву заголовка? Я могу внести незначительные изменения в разметку (например, добавить обертку div вокруг вещей), хотя и не без труда.

Ответы

Ответ 1

::first-letter не работает на встроенных элементах, таких как span. ::first-letter работает с элементами блока, такими как абзац, заголовок таблицы, ячейка таблицы, элемент списка или элементы, для которых свойство display значение inline-block.

Поэтому лучше использовать ::first-letter для p вместо span.

p::first-letter {font-size: 500px;}

или если вы хотите использовать селектор ::first-letter в span напишите его так:

p b span::first-letter {font-size: 500px !important;}
span {display:block}

MDN обеспечивает обоснование этого неочевидного поведения:

Псевдоэлемент ::first-letter CSS выбирает первую букву первой строки блока, если ему не предшествует какой-либо другой контент (например, изображения или встроенные таблицы) в его строке.

...

Первая строка имеет значение только в блоке block-container, поэтому ::first-letter влияет только на элементы с display значением block, inline-block, table-cell, list-item или table-caption Во всех остальных случаях ::first-letter имеет никакого эффекта.

Примеры

Ответ 2

Вы можете получить предполагаемое поведение, установив свойство отображения диапазона в встроенный блок:

.heading span {
  display: inline-block;
}

.heading span:first-letter {
  color: red;
}

<div class="heading">
  <span>An</span>
  <span>Interesting</span>
  <span>Heading</span>
</div>

Ответ 3

Это связано с тем, что :first-letter работает только с элементами block/inline-block. SPAN является встроенным элементом.

Взято из http://reference.sitepoint.com/css/pseudoelement-firstletter:

Псевдоэлемент первой буквы используется в основном для создания общих типографские эффекты, такие как капли. Этот псевдоэлемент представляет первый символ первой отформатированной строки текста в блочный уровень, встроенный блок, заголовок таблицы, ячейку таблицы, или элемент списка.

Ответ 4

:first-letter не работает с display: flex, я пробовал решение с JavaScrpt:

$(".text").each(function(){
  var txt =  $(this).text().replace(/\s+/g,' ').trim() ;
  $(this).text(txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
});

Это тест на codepen: https://codepen.io/anon/pen/KOzJLN