Hanging Indent for an Ordered List:
Code Used:
-
<ol style="list-style-position: inside; padding-left: 20px;">
<li style="margin-bottom: 10px; padding-left: 10px; text-align: justify; text-indent: -15px;">XXX</li>
<li style="margin-bottom: 10px; padding-left: 10px; text-align: justify; text-indent: -15px;">YYY</li>
<li style="margin-bottom: 10px; padding-left: 10px; text-align: justify; text-indent: -15px;">ZZZ</li>
</ol>
Output List:
- First item. This line starts normally, but all following lines in this specific item will be indented to the right. This line starts normally, but all following lines in this specific item will be indented to the right. This line starts normally, but all following lines in this specific item will be indented to the right.
- Second item. This line starts normally, but all following lines in this specific item will be indented to the right. This line starts normally, but all following lines in this specific item will be indented to the right. This line starts normally, but all following lines in this specific item will be indented to the right.
- Third item. This line starts normally, but all following lines in this specific item will be indented to the right. This line starts normally, but all following lines in this specific item will be indented to the right. This line starts normally, but all following lines in this specific item will be indented to the right.
Detailed Description for an Ordered List:
Alternatively, for a hanging paragraph use:
- <p style="text-indent: 40px;">XXX...YYY...ZZZ</p>
Resulting in:
First paragraph: The first line in this paragraph starts indented to the right, but all following lines in this specific item will appear normal. Thes first line in this paragraph starts indented to the right, but all following lines in this specific item will appear normal.
Second paragraph: The first line in this paragraph starts intended to the right, but all following lines in this specific item will appear normal. The first line in this paragraph starts indented to the right, but all following lines in this specific item will appear normal. Or try instead...
A) This time using both a positive padding-left with negative text indent. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Aenean commodo ligula eget dolor. Aenean Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
B) This time using both a positive padding-left with negative text indent. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Aenean commodo ligula eget dolor. Aenean Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Finally for a newspaper style, use:
- <p><span style="float: left; font-size: 50px; line-height: 35px; padding-right: 5px; padding-top: 3px;">A</span>BCD...WXYZ.</p>
Resulting in:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
