编号 headings/paragraphs 的可变文本缩进

Question

我的 HTML/CSS 任务看起来很简单：我需要在多行段落之前有一个数字（可变长度）并且文本应该有缩进，所以第二行与第一行的起始位置相同行：

1. This is text in
   two lines

10. This is another
    text in two lines

如果我知道必要的缩进，使用 CSS:

会很容易

<p style="padding-left: 14px; text-indent: -14px">1. This is text in two lines</p>

不过，我现在知道了，我的目标是实现动态缩进（不使用 JavaScript）。原因：段落在不同的网页上，第1页有很多space，不是很漂亮。

一个可能的解决方案是 table 构造（通过 <table> 或 CSS-tabled DIVs），但是一个 table 每个段落的结构可能过大。

另一种可能的解决方案是数字浮动 DIV...但我不知道文本的高度。

<div style="float: left; width: 1px; height: ?; overflow: visible">1.</div>
This is text in two lines

因此，我正在寻找更优雅的解决方案来解决这个问题，使用 HTML 和 CSS。谢谢你的想法！

BurninLeo

Answer 1

此处示例：jsfiddle

<!-- html -->
<div style="float: left">1.</div>
<p>Phasellus lacinia ipsum quis dolor faucibus interdum.</p>

/* css */
p {overflow: hidden}

Answer 2

尝试使用

 <ol>
    <li>
      This is text is<br>
      In two lines
    </li>
 </ol>

示例：

variable text-indention for numbered headings/paragraphs