First of all I want to say that the use of the multi column layout module is still not recommendable.
Mainly because of the missing support for the break-before
, break-after
, break-inside
properties, with the exception of IE 10+ and the proprietary -webkit-column-break-*
properties (see: CSS3 Multiple column layout).
(You also may want to take a look at my answer to this SO question: IE (11) improper handling of CSS multi-columns?)
Additionally you have to remember, that there is a so called "multi-column pseudo-algorithm", which seems to be confused by your :first-letter
selector.
You can avoid this problem by using a span
element with a class attribute for the drop caps instead.
But as the first letters are larger in size than the rest of the text, there arises another problem.
It may happen that a (single) line of text of the beginning of a paragraph with a drop cap may fit to the previous column, whereas the drop cap (which is about twice as high as the normal text) may not.
To avoid this unwanted behaviour you have to use another span
element, which includes at least more text than that may fit into a single line (of text)!
And giving these span elements a display: inline-block;
solves this problem.
Just a word about Amir5000 answer: Though my proposed solution also needs some extra span elements, it does not use "purely presentational markup" which may also produce unwanted empty lines.
But as said at the beginning, using multi-column is at least very "tricky" and very difficult to get predicted results across browsers and/ or different viewport widths.
So here is my proposed "solution": DEMO