0

To display lines with line-numbers I use for each line the following template:

<div><span style="display: inline-block;width: 50px;">1</span><span>line1</span></div>
<div><span style="display: inline-block;width: 50px;">2</span><span>line2</span></div>

The issue with this solution is that when I select by mouse, I am getting also line-numbers. Can you please let me know to change above code so that only line1 & line2 will be selected and copied to clipboard.

Can I do it by using CSS/HTML, or more advanced approach (js / jquery) is required?

regards, M.

masterofchant
  • 55
  • 1
  • 6
  • Make these spans position: absolute; and give them margin or change the top coordinate with javascript. Another way is to make unordered list with line numbers and make it floatable and make it absolute position. Using js get the count of span-s with code and enumerate the li-s. Hope it helps – num8er May 24 '15 at 18:56
  • I think that it is not duplicate @Vohuman, but i am not sure. The solution for chrome browser is incorrect so the answer is not full. – Gerasimos Pap Jun 08 '15 at 19:53
  • Did you find another solution than my answer? Upvote a useful answer and Mark as Answer the one that give you the answer. Respect the effort of those that try to find an answer by giving some points. – Gerasimos Pap Jun 18 '15 at 21:05
  • as I was not able to do it in single div, I used table as described below and it is working fine now. – masterofchant Jun 20 '15 at 08:16
  • Really? I have spent so much time to find so many solutions and i got a really good answer and you set as an answer something that do not hide even 1 think? You did not even gave me an upvote..... – Gerasimos Pap Jun 20 '15 at 18:45

1 Answers1

0

Simple HTML/CSS will do. Refer to the following link:- To learn List:- http://www.w3schools.com/html/html_lists.asp

Also For example Refer to the codes given below:-

<div>
    <table>
        <tr>
            <td><ul style="list-style-type:none">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
                <td><ul style="list-style-type:none">
  <li>line1</li>
  <li>line2</li>
  <li>line3</li>
</ul>
        </tr>              
    </table>

</div>

jsfiddle:- https://jsfiddle.net/vo67pudL/

Bhuwan
  • 177
  • 2
  • 12
  • 1
    he does not want the line numbers to be selected when he selects line1and line2 simoultaneously .since line1 one and line2 are in different column of the table .he is able to select what is required. – Bhuwan May 24 '15 at 19:12