编号标题/段落的可变文本缩进

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 页上有很多空间不是很漂亮。

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

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

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

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

伯宁里奥

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>

例：

1. 这是文本是
   分两行