How to change the indentation of all the lines except the first line in bulleted or non bulleted list?

问题

So, I have simple bullet list like this:

<ul>
    <li>Apple. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis elit turpis, vel facilisis risus pellentesque nec. Curabitur dapibus libero diam, egestas congue magna dictum ut. Fusce nec tortor ut erat ultrices fermentum. Proin dolor nibh, gravida eu mi sed, imperdiet venenatis est.</li>
    <li>Orange. Integer eget velit dolor. Aenean a metus at purus convallis porttitor. Etiam hendrerit leo eu elementum tempor. Sed at semper magna. Sed tincidunt, mi at auctor hendrerit, nibh tellus lobortis dui, nec volutpat nulla lacus adipiscing erat. In quis mi at lorem ullamcorper consectetur. </li>
</ul>

Which normally will be shown like this:

Apple. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis elit turpis, vel facilisis risus pellentesque nec. Curabitur dapibus libero diam, egestas congue magna dictum ut. Fusce nec tortor ut erat ultrices fermentum. Proin dolor nibh, gravida eu mi sed, imperdiet venenatis est.
Orange. Integer eget velit dolor. Aenean a metus at purus convallis porttitor. Etiam hendrerit leo eu elementum tempor. Sed at semper magna. Sed tincidunt, mi at auctor hendrerit, nibh tellus lobortis dui, nec volutpat nulla lacus adipiscing erat. In quis mi at lorem ullamcorper consectetur.

But, I need to change all the line indentations except the first line so it will looks somewhat like this:

Apple. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis elit turpis, vel facilisis risus pellentesque nec. Curabitur dapibus libero diam, egestas congue magna dictum ut. Fusce nec tortor ut erat ultrices fermentum. Proin dolor nibh, gravida eu mi sed, imperdiet venenatis est.
Orange. Integer eget velit dolor. Aenean a metus at purus convallis porttitor. Etiam hendrerit leo eu elementum tempor. Sed at semper magna. Sed tincidunt, mi at auctor hendrerit, nibh tellus lobortis dui, nec volutpat nulla lacus adipiscing erat. In quis mi at lorem ullamcorper consectetur.

But without changing the outer DIV container dimension, or padding, or margin, or whatever. Only styling on the UL or OL or LI tag. All I see on the web is how to change the first indentation only, which can be use to finish the problem above if combined with the DIV padding dimension change, but it's very complicated as I can't control the HTML code. I don't even know if the HTML code will include DIV or not in the future. So I can only give the CSS to OL, UL, and LI. How can I accomplish this using pure CSS?

回答1:

You could add padding to the li, and then use a negative text-indent value to displace the padding on the first line.

jsFiddle example

li {
    padding-left:30px;
    text-indent:-30px;
}

This is the only solution I can think of. I tried using :first-line, but that doesn't really work in this situation.

来源：https://stackoverflow.com/questions/20510651/how-to-change-the-indentation-of-all-the-lines-except-the-first-line-in-bulleted

标签

html

css

indentation