HTML:如何更改有序列表项点显示？

Question

我有一个 <ol>在我的 HTML 中标记(有序列表)文档。我希望它以下列格式显示元素:

(i)    Item 1
(ii)   Item 2
(iii)  Item 3

目前我正在使用以下 HTML代码:

<ol type="i">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

这给了我以下结果:

i.    Item 1
ii.   Item 2
iii.  Item 3

是否可以按照我在这个问题开头提到的方式显示我的列表？

编辑: 跟进问题，这也是已接受答案的一部分

如何让包装的元素(对于一行来说太长的元素)自动在同一标签行开始新行？

Answer 1

仅使用 CSS3，您可以按如下方式进行:

ol {
    counter-reset: increment_var;
    list-style-type: none;
}
li:before {
    display: inline-block;
    content: "(" counter(increment_var, lower-roman) ") ";
    counter-increment: increment_var;
    width: 40px;
    margin-left: -40px;
}
li {
  margin-left: 40px;
  }

<ol>
  <li>Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1</li>
  <li>Example 2</li>
  <li>Example 3</li>
  <li>Example 4</li>
  <li>Example 5</li>
</ol>