Стиль первой буквы каждого слова, а не только первого слова?

Для оформления первой буквы я использую :first-letter в абзаце.

p:first-letter { 
    font-size: 200%;
    color: #8A2BE2;
}

Но что, если я хочу стилизовать первую букву каждого слова в абзаце?


html css word
person Vincent1989    schedule 10.10.2014    source источник
comment
Возможно, это приведет вас в правильном направлении: community.sitepoint.com/t/   -  person Brendan    schedule 10.10.2014
comment
Просто из любопытства, а зачем вам это?   -  person    schedule 10.10.2014

Ответы (1)


arrow_upward
0
arrow_downward

Невозможно использовать CSS без добавления дополнительных элементов в разметку (или в дерево DOM с помощью JavaScript), потому что для этой цели нет селектора CSS.

Если вы добавите разметку для каждого слова, вы можете использовать для них :first-letter, если сделаете их встроенными блоками (:first-letter нельзя использовать для встроенных элементов, что по умолчанию является span):

<style>
.word {
  display: inline-block;
}
.word:first-letter {
  font-size: 200%;
  color: #8A2BE2;
}
</style>
<span class=word>Hello</span> <span class=word>world</span>

В качестве альтернативы вы, конечно, можете использовать разметку для каждой начальной буквы, например. <span class=word>H</span>ello <span class=word>w</span>orld и используйте простой селектор, например .word, чтобы установить форматирование символов. Однако использование «разметки слов» может: а) выглядеть лучше в исходном коде HTML, б) позволить вам также легко форматировать целые слова, если это станет желательным, и в) избежать потенциальных рисков, вызванных разбиением слова с помощью разметки (очень небольшой риски, вероятно, но люди иногда беспокоятся о них).

person Jukka K. Korpela    schedule 10.10.2014