生成行号不是 selected/copied 的代码

Question

为了显示带有行号的行，我为每一行使用以下模板：

<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>

此解决方案的问题是，当我通过鼠标 select 时，我也得到了行号。能否请您告诉我更改上面的代码，以便只有第 1 行和第 2 行会被 selected 并复制到剪贴板。

我可以使用 CSS/HTML 来实现吗？还是需要更高级的方法 (js / jquery)？

问候，M。

Answer 1

简单 HTML/CSS 即可。参考以下link:- 学习列表：- http://www.w3schools.com/html/html_lists.asp

又例如参考下面给出的代码：-

<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/

生成行号不是 selected/copied 的代码

Generate code with line numbers which are not selected/copied

html

javascript

css

xhtml

jquery