HTML: How to change the displayed position of the elements of the order list?

Question

There is an <ol> (ordered list) tag in my HTML document. I would like it to display elements in the following format:

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

I am currently working with the following HTML code:

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

This gives me the following result:

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

Is it possible to display my list at will, which I mentioned at the beginning of this question?

EDIT: Next question, which is also part of the accepted answer

How can I get wrapped items (items that are too long for one line) to automatically start new lines on the same tab?

Answer 1

Using only CSS3 , you can do it like this:

 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>