craft.entries and :first-letter

Question

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
<p class='dropcap'>{{ entry.body }}</p>

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

<p class='drop cap'>This is {{ entry.body }}</p>

The T is dropped as expected.

Any ideas on how to fix this?

Answer 1

Rich Text fields always return the paragraphs wrapped in <p> tags. So you would have to use an additional <div> element and apply the dropcap styles to the first <p> tag within that <div> using the first-of-type pseudo-class.

<div class='dropcap'>
    {{ entry.body }}
</div>

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

Answer 2

Thanks to Lindsey D, using a Rich Text field results in issues with :first-letter. Use a plaintext field instead.