Search code examples
javascriptcsshtmlmustache

Add line numbering in paragraphs


I am developing a web application in which I have to print a paragraph with every 5th line numbered according to line number

    I am living in New Jersey
2   who like to study music 
    create new applications
4   which can help others.

I am unable to write the html/css code for this.

I am using ajax request to extract paragraph data line by line and Mustache.js to render the data


Solution

  • We need a bit more context here. Mostly the HTML structure you're dealing with.
    Most of all, it may be interesting to know how your <p> tags and structured, how line returns are done (<br/>?)

    This answer is a bit quick & dirty, but works.
    The good thing is that there is no need to add a <p> tag for each line (as this would not make much sense).
    The bad thing is it uses <li> tag without any reason, nor <ul> parent except to add automatically number through css

    So please, do not consider this answer as a final solution, but just as a start

    HTML

    <p>
        <li>I am living in New Jersey</li><br/>
        <li>who like to study music</li><br/>
        <li>create new applications</li><br/>
        <li>which can help others.</li><br/>
    </p>
    


    CSS

    li:nth-of-type(even) {
        list-style-type: decimal;
    }
    li:nth-of-type(odd) {
        list-style-type: none;
        padding-left: 1em;
    }