Span标签重叠问题求助：期望效果与实际效果不一致

问题描述 #

我希望实现每个方括号内的标记（如[A]、[B]）分别显示在下方对应文本的上方位置，但实际运行代码后，所有标记都重叠在一起，无法区分位置。

原代码 #

JavaScript #

var string = `[A][B]Co[C]il coi[D]l`;
string = string.replaceAll("#", "shp").replaceAll(",", "cma")
string = string.replace(/.+/g, "<div>$&</div>")
var song = string.replace(/\[(?<topText>\w+)\]/g, "<span>$<topText></span>").replaceAll("shp", "#").replaceAll("cma", ",");
document.body.innerHTML = song;

CSS #

div {
  line-height: 2.0em;
  position: relative;
  color: rgba(233, 229, 229, 0.897);
  font-weight: bold;
}

span {
  position: absolute;
  font-family: MyFont;
  line-height: 0.5em;
  color: green;
  font-style: italic;
  margin: auto;
}

body {
  margin-top: 10px;
  background-color: rgba(0, 0, 0, 0.129);
  font-size: 60px;
}

问题原因 #

所有标记<span>都使用了position: absolute，但未设置水平偏移位置，默认都会定位在父元素<div>的左上角，导致重叠。同时，标记与下方文本没有绑定对应关系，无法自动匹配位置。

修复方案 #

将每个标记与对应的文本包裹在一个行内相对定位容器中，让标记相对于该容器定位在上方，确保每个标记对应到正确的文本位置。

修改后的代码 #

JavaScript

var string = `[A][B]Co[C]il coi[D]l`;
// 先替换特殊字符，避免正则冲突
string = string.replaceAll("#", "shp").replaceAll(",", "cma");

// 将每个[标记]和后续文本片段绑定，包裹在行内容器中
let processed = string.replace(/\[(\w+)\]/g, '|$1|');
let parts = processed.split('|');
let resultParts = [];

for (let i = 0; i < parts.length; i++) {
  if (parts[i].match(/^\w+$/)) {
    // 处理标记，创建带标记的容器
    resultParts.push(`<span class="char-wrap"><span class="top-text">${parts[i]}</span><span class="main-text"></span></span>`);
  } else if (parts[i]) {
    // 处理文本，逐个字符匹配前面的标记容器
    for (let char of parts[i]) {
      if (resultParts.length > 0 && resultParts[resultParts.length - 1].includes('<span class="main-text"></span>')) {
        resultParts[resultParts.length - 1] = resultParts[resultParts.length - 1].replace('<span class="main-text"></span>', `<span class="main-text">${char}</span>`);
      } else {
        resultParts.push(`<span class="char-wrap"><span class="main-text">${char}</span></span>`);
      }
    }
  }
}

// 组合最终HTML并恢复特殊字符
var song = `<div>${resultParts.join('')}</div>`
  .replaceAll("shp", "#")
  .replaceAll("cma", ",");

document.body.innerHTML = song;

CSS

body {
  margin-top: 10px;
  background-color: rgba(0, 0, 0, 0.129);
  font-size: 60px;
}

div {
  line-height: 2.0em;
  color: rgba(233, 229, 229, 0.897);
  font-weight: bold;
}

.char-wrap {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 1em; /* 确保每个字符容器宽度一致 */
}

.top-text {
  position: absolute;
  top: -0.8em; /* 调整标记与文本的垂直距离 */
  left: 0;
  right: 0;
  font-family: MyFont;
  line-height: 0.5em;
  color: green;
  font-style: italic;
  font-size: 0.4em; /* 缩小标记字体 */
}

.main-text {
  display: block;
}

说明 #

1. 行内容器：每个字符和对应的标记都被包裹在.char-wrap中，确保标记与文本一一对应。
2. 定位调整：.top-text相对于.char-wrap定位在上方，通过top和font-size控制标记的位置和大小。
3. 字符对齐：设置.char-wrap的宽度为1em，确保每个字符容器对齐，标记位置更规整。

内容的提问来源于stack exchange，提问作者Rj Stha