html - 如何更改元素符号列表或非元素符号列表中除第一行以外的所有行的缩进？

Question

所以，我有这样一个简单的元素符号列表:

<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>

通常会这样显示:

• 苹果。 Lorem ipsum dolor sit amet, consectetur adipiscing elit。 Vivamus venenatis elit turpis，vel facilisis risus pellentesque nec。 Carabitur 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.
• 橙色。整数 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。在 lorem ullamcorper consectetur 的 quis mi 中。

但是，我需要更改所有行的缩进除了第一行，这样它看起来有点像这样:

• 苹果。 Lorem ipsum dolor sit amet, consectetur adipiscing elit。 Vivamus venenatis elit turpis，vel facilisis risus pellentesque nec。 Carabitur 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。
• 橙色。整数 eget velit dolor。 Aenean a metus at purus convallis porttitor。 Etiam hendrerit leo eu 基本时间。 Sed at semper magna。 Sed tincidunt, mi at auctor hendrerit, nibh tellus lobortis dui, nec volutpat nulla lacus adipiscing erat。在 lorem ullamcorper consectetur 的 quis mi 中。

但不改变外部 DIV 容器尺寸、填充、边距或其他任何内容。只有 UL 或 OL 或 LI 标签上的样式。我在网上看到的是如何只改变第一个缩进，如果结合DIV padding dimension change可以解决上面的问题，但是很复杂，我无法控制HTML代码。我什至不知道将来HTML代码是否会包含DIV。所以只能把CSS给OL、UL、LI。我如何使用纯 CSS 完成此操作？

Answer 1

您可以向 li 添加填充，然后使用负值 text-indent 替换第一行的填充。

jsFiddle example

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

这是我能想到的唯一解决方案。我尝试使用 :first-line ，但这在这种情况下实际上不起作用。