neclepsio neclepsio - 21 days ago 10
HTML Question

CSS leader dots for chords

I have to display a song with the chords above the lyrics:

C Am D G
This is a song.


When chord is longer than the text it refers to, I have to add some dots to keep the chords in sync with lyrics:

C Am D G
Lo.....ng.


I tried creating a structure of inline-block divs, each with two spans:

<div class="block">
<span class="chord">C&nbspAm&nbspD&nbsp</span><br/>
<span class="text hasdots">Lo</span>
</div>

.block {display: inline-block;}


If chord span is wider than text span, the latter should be filled with dots. If the text is wider, no dots should be added.

Among other, I tried with this CSS, with bad results: the dots are not "cut" to the size of the parent div.

.hasdots:after {
content: "...................";
white-space: nowrap;
overflow: hidden;
}


The non-working code, as well as an example of how it should be, is in https://jsfiddle.net/gwcL3oqc/1/. I can change the structure of HTML if needed.

Can someone please help me? Thank you.

Answer

You should take the pseudo-element out-of-flow to prevent it from increasing the width of the span, and then use overflow: hidden on the span.

.block {
  display: inline-block;
  vertical-align: top;
}
.block > span {
  display: block;
  margin-right: .3em;
}
.chord {
  color: red;
}
.hasdots {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.hasdots:after {
  position: absolute;
  content: "...................";
  white-space: nowrap;
}
<h3>This:</h3>
<div class="block">
  <span class="chord">A</span>
  <span class="text">Next</span>
</div><div class="block">
  <span class="chord">Asus4</span>
  <span class="text hasdots">s</span>
</div><div class="block">
  <span class="chord">A</span>
  <span class="text">hould have dots.</span>
</div><br/>
<div class="block">
  <span class="chord">A</span>
  <span class="text">Next</span>
</div><div class="block">
  <span class="chord">Asus4</span>
  <span class="text hasdots">shouldn't.</span>
</div><div class="block">
  <span class="chord">A</span>
  <span class="text"></span>
</div>
<h3>Should be like this:</h3>
<div class="block">
  <span class="chord">A</span>
  <span class="text">Next</span>
</div><div class="block">
  <span class="chord">Asus4</span>
  <span class="text">s...........</span>
</div><div class="block">
  <span class="chord">A</span>
  <span class="text">hould have dots.</span>
</div><br/>
<div class="block">
  <span class="chord">A</span>
  <span class="text">Next</span>
</div><div class="block">
  <span class="chord">Asus4</span>
  <span class="text">shouldn't.</span>
</div><div class="block">
  <span class="chord">A</span>
  <span class="text"></span>
</div>