There are several methods to indent the second line of the paragraph that can be achieved in many ways. Some of the methods to achieve this are described below with proper code and output. Now some styling can be done using CSS in various ways to indent the second line as per need.
Note: By default, when lines wrap, they just start right below where the previous line started. Take a look at the following to see this in action:
/* length values */ text-indent: 3mm; text-indent: 40px; /* percentage value relative to the containing block width */ text-indent: 15%; /* Keyword values */ text-indent: 5em each-line; text-indent: 5em hanging; text-indent: 5em hanging each-line; /* Global values */ text-indent: inherit; text-indent: initial; text-indent: unset;
<Method 1: In this example, the first line of text is not indented, but subsequent lines from the second line are indented so the first line does not move. It is achieved in this example by setting the text-indent to -36px and padding-left value to 36px. In this example, the beginning div tag contains the following styling information as attributes.
Method 2: By making the position relative to the first line, set the text-indent to -26px and padding-left value to 26px. Here in this example, we have made the position of the second line relative to the first line. So the second line is indented/aligned according to the first line.
- CSS | text-indent Property
- How to change the cases of text in paragraph using CSS?
- How to read a file line by line using node.js ?
- HTML | Paragraph
- HTML | Paragraph
- HTML | DOM Paragraph Object
- HTML | DOM Paragraph align Property
- How to define a paragraph in HTML5 ?
- How to Read a File Line by Line to String in Golang?
- How to break line without using <br> tag in HTML / CSS ?
- How to prevent line breaks in the list of items using CSS?
- How to insert line break before an element using CSS?
- How to make horizontal line with words in the middle using CSS?
- How to write <dt> and <dd> element on the same line using CSS ?
- How to animate a straight line in linear motion using CSS ?
- How to make a vertical wavy text line using HTML and CSS ?
- CSS | text-decoration-line Property
- CSS | line-height Property
- CSS | ::first-line Selector
- CSS | webkit-line-clamp Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.