HTML: Jak zmienić wyświetlane pozycje punktów na liście?

Question

Mam tag <ol> (uporządkowana lista) w moim dokumencie HTML. chciałbym go do wyświetlania elementów w następującym formacie:

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

Obecnie mam go pracy z następującego kodu HTML:

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

To daje mi następujący wynik:

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

Czy mogę wyświetlić moją listę w pożądany sposób, o którym wspomniałem na początku tego pytania?

EDIT:Kontynuacja pytanie, które jest również częścią przyjętego odpowiedź

Jak mogę dostać zapakowane elementy (elementy, które są zbyt długo na jednej linii), aby automatycznie uruchomić nowe linie na tej samej linii zakładki ?

Answer 1

Korzystanie tylko CSS3, można to zrobić w następujący sposób:

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>