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?

  • 1
    What kind of field is body? If it's a rich text field, then your first character is likely a <, not a letter.
    – Lindsey D
    Nov 30 '15 at 5:38

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 }}
.dropcap p:first-of-type:first-letter {
  float: left;
  font-size: 4em;
  line-height: 3em;

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.