craft.entries and :first-letter I want to display the first character in a paragraph with a drop cap. It works fine with normal text or setting it with js, but when I use an entry field it doesn't pull out the first character. The code looks like this:

// css
p.dropcap { 
float: left; 
font-size: 4em;
… 
}

// html
&lt;p class='dropcap'&gt;{{ entry.body }}&lt;/p&gt;


The first letter isn't dropped, but if I change the html to:

&lt;p class='drop cap'&gt;This is {{ entry.body }}&lt;/p&gt;


The T is dropped as expected.

Any ideas on how to fix this?
Rich Text fields always return the paragraphs wrapped in &lt;p&gt; tags. So you would have to use an additional &lt;div&gt; element and apply the dropcap styles to the first &lt;p&gt; tag within that &lt;div&gt; using the first-of-type pseudo-class.

&lt;div class='dropcap'&gt;
    {{ entry.body }}
&lt;/div&gt;




.dropcap p:first-of-type:first-letter {
  float: left;
  font-size: 4em;
  line-height: 3em;
}