Question

我必须用歌词上方的和弦显示一首歌曲：

C    Am D G
This is a song.

当和弦长于它所引用的文字时，我必须添加一些点以保持和弦与歌词同步：

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

我尝试创建一个内联块div的结构，每个div都有两个跨度：

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

.block {display: inline-block;}

如果和弦跨度比文本跨度宽，后者应填充点。如果文字较宽，则不应添加任何点。

除此之外，我尝试使用这个CSS，结果不好：点不是＆＃34; cut＆＃34;到父div的大小。

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

非工作代码及其应用示例，位于https://jsfiddle.net/gwcL3oqc/1/。如果需要，我可以更改HTML的结构。

有人可以帮帮我吗？谢谢。

Answer 1

您应该将伪元素取消流量以防止它增加跨度的宽度，然后在跨度上使用overflow: hidden。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

和弦的CSS领导点

1 个答案: