Create code with numerical markers that have not been highlighted or copied

When I want to show lines with line numbers, I typically use this template for each line:

<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 problem arises when selecting text with the mouse, as the line numbers are also included. Can someone advise on how to modify the code above so that only 'line1' and 'line2' will be selected and copied to the clipboard?

Is it possible to achieve this through CSS/HTML alone, or would a more advanced approach such as JavaScript or jQuery be necessary?

Thank you, M.

javascriptjqueryhtmlcssxhtml

Answer №1

Basic HTML/CSS is all you need. Check out the link below for a tutorial on Lists:-

Here are some sample codes to refer to:-

<div>
    <ul style="list-style-type:none">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

     <ul style="list-style-type:none">
  <li>line1</li>
  <li>line2</li>
  <li>line3</li>
</ul>
    
</div>

For a live demo, visit this jsfiddle link:- https://jsfiddle.net/abc123/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The direction of the drop-down changes based on the available space

I'm new to programming and could really use your assistance. I'm having a problem with the positioning of my drop down sub-menus. Specifically, I have a simple drop down in my header that is too close to the window border when certain permission ...

javascriptdrop-down-menu

Can you tell me how to add a variable to an array of objects in JavaScript?

I am currently engaged in a small project aimed at: Reading data from a CSV file (such as employee names and shifts) Displaying this data on FullCalendar. How can I incorporate the CSV result into this line of code: { id: 'a', title: 'Audi ...

javascriptajax

Encountering a broken image icon while attempting to the text alignment with an image in a React application

Working on a React app, I'm facing an issue aligning text with an image. Currently, it's showing a broken icon which makes me question if the path to the image is correct. Check out my file structure below.https://i.sstatic.net/zQ4Xd.png The ima ...

htmlreactjsimagebootstrap-4

Discover the best method for sending multiple API requests to Vuex store using Nuxt middleware

I am having trouble figuring out how to make multiple API calls to Vuex store from Nuxt middleware. I have successfully implemented it for a single API call, but I can't seem to get it working for multiple APIs. // middleware/log.js import axios fro ...

javascriptvue.jsvuejs2vuexnuxt.js

What is the correct way to establish a title while exporting data in JSON format?

Uncertain if this title is appropriate, I am seeking guidance on exporting data to json format from a mysql database. The table includes id, recommendData, level, and room fields. The code in my .php file is as follows: <?php $DB_HostName = ""; $DB_Na ...

phpjquerymysqljson

Separate angular structure into various sections

I am developing a form builder using Angular dynamic form functionality. The form data is loaded from a JSON object, as shown below: jsonData: any = [ { "elementType": "textbox", "class": "col-12 col-md-4 col-sm-12", "key": "first_ ...

javascriptjsonangulartypescriptangular-reactive-forms

Struggling to find the right alignment for my Bootstrap card design

I'm attempting to center a card in the middle of the screen. While I was able to horizontally center it using mx-auto, I'm facing difficulties with vertical centering. I tried using mt-3 to add margin-top to the card, but it only gives me about ...

htmlbootstrap-5

The issue with JQuery's JSON.stringify function not functioning as expected

Hi everyone, I'm currently working on a project involving a nested menu and I need to update it via API whenever the client moves an item. To achieve this, I am using a jQuery plugin called . The plugin includes an onDrop method as shown in the code s ...

javascriptjqueryjson

When utilizing KineticJS on a canvas that has been rotated with css3, the functionality of the events appears to be malfunctioning

Currently, I'm working on a rotating pie-chart widget using Kineticjs. However, I have run into an issue where the events don't seem to function correctly when drawing on a rotated canvas element (with the parent node being rotated 60deg using CS ...

javascriptcss-transitionskineticjs

Struggling to retrieve every single item

Looking to extract the ID of each item labeled "Match Report" (//*[@id="tournament-fixture"]/tbody/tr[2]/td[7]/a[1]). I can access those visible in the source code, but the website utilizes Incapsula, preventing me from using requests. Currently relying on ...

javascriptpythonseleniumbeautifulsoup

unable to implement multiple layouts while utilizing react-router

My current project requires two different layouts: one for the homepage (currently implemented in app.js) and another for the result page. After submitting a form, the results should be displayed in the result layout instead of the app layout. However, whe ...

javascriptreactjsreact-router

Matrix calculation for bone orientation towards an object in Three.js

I am encountering issues with calculating the orientation of a bone to "look at" an object. The lookAt function is not functioning as expected for me. This could be due to the fact that the bone's matrix is an identity matrix in local space, so the de ...

javascriptmatrixthree.js

Reset an Angular service's public variable

I recently started working with Angular and encountered an issue that I couldn't find a solution for on Google or Stack Overflow. I believe my problem lies in not knowing what to search for. Here is the code snippet causing trouble: JSFiddle HTML &l ...

javascriptangularjs

An issue arose when attempting to load the page using jQuery

Currently, I am implementing the slidedeck jquery plugin on my webpage to display slides. While everything is functioning properly, I am facing an issue with the CSS loading process. After these slides, I have an import statement for another page that retr ...

javascriptjquerycssjquery-uijsp

Master the art of positioning in three.js framework

I am a beginner in javascript and three.js, and I am currently exploring how to determine the 3d positions on a webpage. For instance, I want to place a point light at the coordinates (50,20,10) in x, y, z values. How can I determine where these x, y, z va ...

javascripthtmlthree.js

Using AJAX to Query a PHP Database

Currently, I am implementing an AJAX call from the YouTube player JavaScript to a PHP page that contains various functions, mainly involving database inserts. In my PHP code, I use a case statement to determine which function is being called based on the d ...

javascriptphpajax

Saving images to your local folder with Angular.js and PHP: A step-by-step guide

I am looking to upload and store an image in a local folder using Angular.js and PHP. Below is the code snippet I have: <div class="col-md-6 bannerimagefile" ng-controller="imgController"> <form name="form"> <label for="banneri ...

javascriptphpjqueryangularjs

What is the design for headers in accordion-groups with ngx-bootstrap?

Is there a way to customize the style of ngx-bootstrap accordion headers? I've attempted various methods, including copying and pasting code from the documentation for header customization. However, it hasn't been successful. When inspecting the ...

cssangulartypescriptbootstrap-4ngx-bootstrap

Adding a plethora of HTML using jQuery

Struggling to create a single-page website, I've found myself relying heavily on jQuery's .append function. But surely, there has to be a more efficient method for appending large chunks of code (like tables, graphs, etc.) onto a page. Take this ...

javascriptjqueryhtmlajax

A guide on setting up fixed row numbers in MUI-X DataGrid

One challenge I am facing is rendering the row numbers in a table so that they remain static even when columns are sorted or filtered. I attempted to use the getRowIndexRelativeToVisibleRows method of the grid API, but unfortunately, it does not work as ex ...

javascriptreactjsmaterial-uifrontendmui-x-data-grid