HTMLでドロップキャップ（記事で見かける頭一文字目を大きくするレイアウト）

▼動作結果

ドロップキャップです。
改行したら左の大きな文字に続きます。
改行

<style>
.dropcap{
  width: 500px;
  font-family: Georgia, "Times New Roman", Times, serif;
}
.dropcap:first-letter {
  font-size: 3em;
  line-height: 1;
  float: left;
  margin: 0 .2em 0 0;
  padding: .1em 0;
}
</style>

<p class='dropcap'>ドロップキャップです。<br>改行したら左の大きな文字に続きます。<br>改行</p>