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

Question

我的Get-Job MyJob 文档中有<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>

是否可以按照我在本期问题开头提到的理想方式显示我的列表？

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

如何在同一标签行上自动开始新行包裹物品（一行太长的物品）？

Answer 1

仅使用CSS3，您可以按以下方式执行此操作：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;