CSS float实现首字下沉

212 阅读1分钟

方法:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>首字下沉</title>
        <style>
            p {
                width: 400px;
                margin: 0 auto;
            }
            p::first-line {
                text-transform: uppercase;
            }
            P::first-letter {
                font-size: 4em;
                border: 1px solid yellow;
                background: greenyellow;
                float: left;
                padding: 2px;
                margin-right: 5px;
            }
        </style>
    </head>
    <body>
        <p>I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation.</p>
        <p>Five score years ago, a great American, in whose symbolic shadow we stand today, signed the Emancipation Proclamation. This momentous decree came as a great beacon light of hope to millions of Negro slaves who had been seared in the flames of withering injustice. It came as a joyous daybreak to end the long night of their captivity.</p>
    </body>
</html>

效果: