Have you ever wanted to indent the second line of a list item instead of it appearing directly beneath the bullet point? This is probably why you are here and below is probably the result you are looking for:
Today we are going to show you an easy way to do this.
The reason this is happening is that the tick is inline content so when the text wraps it will continue to flow as usual.
You can stop this behaviour by taking advantage of text-indent
:
The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.
By supplying a negative text-indent you can tell the first line to shift a desired amount to the left. If you then specify a positive padding-left you can cancel this offset out.
In the following example a value of 20px:-
ul {
list-style: none;
width: 200px;
text-indent: -20px; /* key property */
margin-left: 20px; /* key property */
}
li { margin-bottom: 10px; }
And there you have it, here is a CodePen of the above in action.
THANK YOU SO MUCH! After trying the solutions from a whole bunch of other sites including multiple posts on StackOverflow, this was the thing that finally got my wrapped lines to be indented correctly. Much appreciated!
Thank you! I’ve also searched around Google for hours. This post of yours definitely saved me. π I’m following you now on IG.