Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make the first letter push itself into the paragraph like a newspaper style

Tags:

html

css

I created some CSS to handle the first letter in a paragraph too look bigger,

How can I make the first letter push itself down and to the left so it will not be higher than the line itself and indent the other lines to the right if needed? (see attached image)

enter image description here

.text-article {
    color: #000;
}
.text-article:first-letter {
    font-weight: bold;
    font-size: 60px;
    font-size: 6rem;
    line-height: 10px;
    line-height: 1rem;
    text-transform: uppercase;
}
<div class="text-article">
We the People is a section of the whitehouse.gov website, launched September 22, 2011,[1] for petitioning the current administration's policy experts. Petitions that meet a certain threshold of signatures are most of the time reviewed by officials in the Administration and official responses are then issued, but not always, as outlined in the Criticism section.[1] Criminal justice proceedings in the United States are not subject to White House website petitions. In fact, no real processes of the federal government are subject to these White House website petitions; they are a public relations device for the present administration which permits citizens to express themselves. On August 23, 2012, the White House Director of Digital Strategy Macon Phillips released the source code for the platform.[2] The source code is available on GitHub, and lists both public domain status as a work of the U.S. federal government and licensing under the GPL v2.[3]
</div>
like image 432
Yovav Avatar asked Mar 14 '23 17:03

Yovav


1 Answers

You can use float:left to get the first letter to move down and push the other lines out of the way. You'll also need to adjust the line-height to make it a bit larger -- I used 40px/4rem.

.text-article {
    color: #000;
}
.text-article:first-letter {
    float:left;
    font-weight: bold;
    font-size: 60px;
    font-size: 6rem;
    line-height: 40px;
    line-height: 4rem;
    height:4rem;
    text-transform: uppercase;
}
<div class="text-article">
We the People is a section of the whitehouse.gov website, launched September 22, 2011,[1] for petitioning the current administration's policy experts. Petitions that meet a certain threshold of signatures are most of the time reviewed by officials in the Administration and official responses are then issued, but not always, as outlined in the Criticism section.[1] Criminal justice proceedings in the United States are not subject to White House website petitions. In fact, no real processes of the federal government are subject to these White House website petitions; they are a public relations device for the present administration which permits citizens to express themselves. On August 23, 2012, the White House Director of Digital Strategy Macon Phillips released the source code for the platform.[2] The source code is available on GitHub, and lists both public domain status as a work of the U.S. federal government and licensing under the GPL v2.[3]
</div>
like image 146
Carter Sande Avatar answered May 04 '23 11:05

Carter Sande