listas - numeracion en html

HTML: ¿Cómo cambiar las visualizaciones del punto del elemento de la lista ordenada?

Question

Tengo una etiqueta <ol> (lista ordenada) en mi documento HTML . Me gustaría que muestre los elementos en el siguiente formato:

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

Actualmente lo tengo trabajando con el siguiente código HTML :

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

Esto me da el siguiente resultado:

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

¿Es posible mostrar mi lista de la manera que mencioné al principio de esta pregunta?

EDITAR: pregunta de seguimiento que también es parte de la respuesta aceptada

¿Cómo puedo obtener elementos envueltos (elementos que son demasiado largos para una línea) para iniciar automáticamente nuevas líneas en la misma línea de tabulación?

Answer 1

Usando solo CSS3 , puede hacerlo de la siguiente manera:

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>