CODEWITHSUNDEEP
htmlcss
JonSnow
JonSnow

Reputation: 325

Draw line from one text element to another with css

I do have a list with text elements and I need to somehow draw a dashed line between element 1-1 and element 2-1.

At the end it should like more or less like this:

El 1-1     ----------------------|
El 1-2                           |
El 1-3                           |
El 1-4                           |
        El 2-1    ---------------|
        El 2-2
        El 2-3

I have no idea how to achieve this. I saw solutions on the web where people are drawing lines from div to another, ok. But this text (El 1-1 and El 2-1) can be anything, wider or smaller, and the horizontal lines have to adjust.

Currently I am playing around with table-cells and borders, but ... no real success. Do you guys have any idea how this could be solved or at least for what I should watch out? This is what I was trying so far:

#div1 {
  width: 400px;
  padding: 0 20px;  
}

#div1-1 {
  border-right: dashed 1px #000000;
  padding-bottom: 10px
    display: table;
}
#div1-2 {
  margin-left: 100px;
  margin-top: -15px;
  display: table;
}

#div1-1 p,
#div1-2 p {
  display: table-row;
}

#div1-1 p span,
#div1-2 p span {
  display: table-cell;
  vertical-align: middle;
}

span.horizontal_dotted_line {
  display: table-cell;
  border-bottom: 1px dashed #000000;
  width: auto;
}
<div id="div1">
  
  <div id="div1-1">
    <p><span>Cell 1-1-1 </span> <span class="horizontal_dotted_line"></span></p>
    <p><span>Cell 1-1-2</span></p>
    <p><span>Cell 1-1-3</span></p>
    <p><span>Cell 1-1-4</span></p>
  </div>
  
  <div id="div1-2">
    <p><span>Cell 1-2-1 </span> <span class="horizontal_dotted_line"></span></p>
    <p><span>Cell 1-2-2</span></p>
    <p><span>Cell 1-2-3</span></p>
    <p><span>Cell 1-2-4</span></p>
  </div>
  
</div>

Upvotes: 1

Views: 1925

Answers (2)

Johannes
Johannes

Reputation: 67748

Here's a possible CSS only solution. I removed all the table display settings and used flex on the p elements which contain the spans. Also, I used relative positions on some of the elements in order to be able to move them vertically in order to achieve vertically centered alignment between text and lines:

#div1 {
  width: 400px;
  padding: 0 20px;
}

#div1-1 {
  border-right: dashed 1px #000000;
  padding-bottom: 10px;
}

#div1-2 {
  margin-left: 100px;
  margin-top: -15px;
}

#div1-1 p,
#div1-2 p {
  display: flex;
  position: relative;
  top: -0.6em;
}

#div1-1 p span,
#div1-2 p span{
  padding-right: 10px;
}

span.horizontal_dotted_line {
  border-bottom: 1px dashed #000000;
  flex-grow: 1;
  position: relative;
  top: -0.5em;
  padding-left: 3px;
}
<div id="div1">

  <div id="div1-1">
    <p><span>Cell 1-1-1 </span> <span class="horizontal_dotted_line"></span></p>
    <p><span>Cell 1-1-2</span></p>
    <p><span>Cell 1-1-3</span></p>
    <p><span>Cell 1-1-4</span></p>
  </div>

  <div id="div1-2">
    <p><span>Cell 1-2-1 </span> <span class="horizontal_dotted_line"></span></p>
    <p><span>Cell 1-2-2</span></p>
    <p><span>Cell 1-2-3</span></p>
    <p><span>Cell 1-2-4</span></p>
  </div>

</div>

Upvotes: 1

TheCoder
TheCoder

Reputation: 52

Using JQuery

  1. Get offset position of div1 and div 2

    div1.offset().top;

    div1.offset().left;

  2. Use SVG polyline to draw dash line

<svg>
    <polyline id="polyline" stroke-dasharray="10"></polyline>
</svg>

  1. Set co-ordinates of line by getting offset position of div 1 and div 2

It will be responsive and having good control on lines.

Upvotes: 1

Related Questions