Automatically continue an ordered list in wordpress

2 Views

I want to create an ordered list, break it (i.e. write some paragraph) and then continue the same ordered list, from the number where I left. Something like this:

List starts here:

Read More
  1. Item 1
  2. Item 2

This line is not a part of the ordered list.

  1. Item 3
  2. Item 4
  3. Item 5

I tried many methods after research. One of them that I found interesting is: 

List starts here:

    <ol class="begin">
        <li>Item 1</li>
        <li>Item 2</li>
    </ol>

    This line is not a part of the ordered list.
    <ol class="continue">
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ol>

But this won’t work for me. This is the output that I get when I post this code in wordpress:

enter image description here
Is there any way of continuing a previous ordered list in html?
I want to continue ordered list automatically without using start=”n” tag.

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. Use <ol start="3"> to achieve what you are looking for.

    For instance,

    The Code:

    <ol class="begin">
        <li>Item 1</li>
        <li>Item 2</li>
    </ol>

    This line is not a part of the ordered list.
    <ol class="continue" start="3">
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ol>

    Live:
    Demo link

    Hope this helps.

    Edit:

    If you do not want to hard-code, then you can do as below.

    The code:

    <ol class="begin">
        <li>Item 1</li>
        <li>Item 2
        <p>
        This line is not a part of the ordered list.
        </p>
        </li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ol>

    Live:
    Demo link 2

    Just in case, if you want the p to be out of the number indent, then you need to declare a text-indent with corresponding indent value.

    Live:
    Demo – 3

    Additionally, if you want that to remain inside the DOM and do not break for small screens, use the below code.

    .indent-p {
   margin-left: -40px;
}

    Live:
    Demo – 4