如何让选择器贡献元素宽度，实现无重叠的吉他和弦文本排版？

嘿，这个问题我太熟悉了！之前用那种绝对定位的方法确实会遇到和弦重叠的坑，尤其是当和弦密集或者和弦名称比较长的时候。不过咱们完全可以只用CSS就解决这个问题，让和弦自动推开对应的文本块，再也不会重叠啦！

核心思路 #

原来的方法里，和弦是用绝对定位脱离文档流的，所以它不会影响下方文本的布局，导致和弦挤在一起。咱们的改进思路是：让每个包含和弦的文本块（.chunk）成为一个独立的内联容器，让和弦的宽度能撑开这个容器，这样相邻的容器就会自动保持距离，避免重叠。同时还要保证和弦精准对齐在文本上方。

实现代码 #

CSS 部分 #

/* 给整行歌词/和弦留出足够的垂直空间 */
.chord-line {
  margin-top: 2.5em;
  line-height: 2.8; /* 调整行高，避免和弦和文本挤在一起 */
}

/* 每个和弦+文本的块容器 */
.chunk {
  display: inline-block;
  text-align: center; /* 让和弦和文本居中对齐，视觉更整齐 */
  min-width: 2em; /* 可选：给单个字母的文本块设置最小宽度，避免太窄 */
  position: relative;
}

/* 生成和弦文本 */
.chunk:before {
  content: attr(data-chord);
  position: absolute;
  top: -1.3em; /* 调整和弦到文本上方的距离 */
  left: 0;
  right: 0;
  font-weight: bold; /* 可选：加粗和弦，让它更醒目 */
  color: #d63384; /* 可选：给和弦加个颜色，区分文本 */
}

HTML 部分 #

<p class="chord-line">
  As <span class="chunk" data-chord="C">I was going over the</span>
  <span class="chunk" data-chord="Am">f</span>
  <span class="chunk" data-chord="B">ar</span>
</p>

<p class="chord-line">
  <span class="chunk" data-chord="C7#9">This</span>
  <span class="chunk" data-chord="Dm7">is</span>
  <span class="chunk" data-chord="G7">a test with long chords</span>
</p>

为什么这个方案有效？ #

1. inline-block 容器：每个 .chunk 变成内联块级元素，它的宽度会自动适配内部内容（文本或和弦中更宽的那个），这样相邻的块就会因为各自的宽度自动分开，不会重叠。
2. 居中对齐：text-align: center 让和弦和对应的文本始终对齐，不会出现和弦偏移的情况。
3. 绝对定位的和弦：虽然和弦还是用绝对定位，但它的左右被限制在 .chunk 容器内，宽度和容器一致，既保证了和弦在文本上方，又不会超出容器范围干扰其他块。

这个方案完全不需要JavaScript，而且能自适应各种长度的和弦和文本，完美解决重叠问题～

内容的提问来源于stack exchange，提问作者Daniel Centore