Back

Technologies:

javascriptjavascript
csscss
avatar
Tolerim
a month ago

Reworded: How do I establish a connection between data using a dotted line?

The current output displays data with connecting dotted lines, while the expected output omits the lines. Currently, the connecting lines are hardcoded. The following code includes a collapse feature and applies a CSS class to align the data to the right side. To achieve the expected output, you can remove the dots and replace them with additional spaces inside the tags, like this: 
<div>
   <a data-target=".lev1"> DisplayData</a>
   <p class ="collapse">data1........................ 
       <span class="RightAlign"> '  10  '</span>
   </p>
   <p class ="collapse">data200.....................
       <span class="RightAlign">'  3000  '</span>
   </p>
 </div>
Answers(2)
avatar
Vogi
a month ago
Verified Answer
You can remove the connecting lines in HTML by replacing them with additional spaces inside the tags. Here's an example: 
<div>
   <a data-target=".lev1"> DisplayData</a>
   <p class ="collapse">data1........................ 
       <span class="RightAlign"> '  10  '</span>
   </p>
   <p class ="collapse">data200.....................
       <span class="RightAlign">'  3000  '</span>
   </p>
 </div>
This code includes a collapse feature and applies a CSS class to align the data to the right side. You can remove the dots and replace them with additional spaces inside the tags, like this: 
<div>
   <a data-target=".lev1"> DisplayData</a>
   <p class ="collapse">data1                        
       <span class="RightAlign"> '  10  '</span>
   </p>
   <p class ="collapse">data200                     
       <span class="RightAlign">'  3000  '</span>
   </p>
 </div>
I hope this helps! Let me know if you have any other questions.

Sources

html - How to avoid a new line with the 'p' tag - Stack OverflowDraw or delete a line or connectorHow to remove all line breaks from a string using JavaScript?Remove line breaks from between html tagsHow to remove horizontal lines in a table in html?How to Reduce the Spacing Between Lines in HTML
avatar
Tolerim
a month ago
One way to achieve the expected output without hardcoding the connecting dotted lines is to use CSS. You can add a border-bottom property to your

elements and adjust the padding and text-align properties to achieve the desired layout. Here's an example: 

<div>
  <a data-target=".lev1">DisplayData</a>
  <p class="collapse">data1<span class="RightAlign">10</span></p>
  <p class="collapse">data200<span class="RightAlign">3000</span></p>
</div>
.collapse {
  padding-bottom: 5px;  /* adjust to increase/decrease gap between text and line */
  border-bottom: 1px dotted black;  /* adjust to change line style */
  text-align: justify;  /* align text to both left and right edges */
}

.collapse::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 0;
}

.RightAlign {
  float: right;
  margin-right: 20px;
  margin-left: 10px;
}
In this example, we have added the CSS class .collapse to the

elements and set the padding-bottom property to create some space between the text and the line. We have also set the border-bottom property to create a dotted line below the text. To align the text to both left and right edges, we have used the text-align: justify property. To avoid the last line from stretching, we have added a pseudo-element ::after to the .collapse class and set its width to 100% and height to 0. Finally, we have kept the .RightAlign class unchanged to align the numbers to the right and add some margin between the text and the numbers.

;