如何在Flex布局换行时重复显示序列名称？

问题需求 #

我有多个带名称的序列字符数组，需要实现以下效果：

1. 字符垂直对齐显示，示例如下：

sequence1 AGCAGTAGACAGTAGTACGTACGATAGCTCGACTAGCA
sequence2 GCGTAGCTCAGCTTCGATCCGATCGATATAAAGCTAGA
sequence3 GCTTCGGAGCGGCTAGCTAGAGATAGCCGATCGATCGA

2. 当序列过长或可视空间不足时自动换行，且换行后需要重复显示序列名称，示例效果：

sequence1 AGCAGTAGACAGTAGTACGTACGATAGCTCGACTAGCA
sequence2 GCGTAGCTCAGCTTCGATCCGATCGATATAAAGCTAGA
sequence3 GCTTCGGAGCGGCTAGCTAGAGATAGCCGATCGATCGA
sequence1 GGATTAGCTAGCTAGACTACGGATCGA
sequence2 GGAGGATCGGCTTCGATCGATTCTTAG
sequence3 GGCATTTAGGGGGATTATATTTCTCTA

此前尝试的Flex布局能实现换行，但无法自动重复序列名称，需要解决该问题。

实现思路 #

核心逻辑是通过JavaScript计算容器可容纳的字符数量，将长序列拆分成多个片段，每个片段对应一组带序列名称的行，确保换行后每个新行组都显示序列名称。

代码实现 #

1. HTML结构 #

<div class="sequence-container"></div>

2. CSS样式 #

.sequence-container {
  font-family: courier, monospace;
  font-weight: bold;
  font-size: 24px;
}
.sequence-row-group {
  margin-bottom: 8px;
}
.sequence-row {
  white-space: nowrap;
}
.sequence-name {
  display: inline-block;
  width: 100px; /* 固定名称宽度，保证垂直对齐 */
}
.sequence-chars {
  display: inline-block;
}

3. JavaScript逻辑 #

// 定义序列数据
const sequences = [
  { name: 'sequence1', chars: 'AGCAGTAGACAGTAGTACGTACGATAGCTCGACTAGCAGGATTAGCTAGCTAGACTACGGATCGA' },
  { name: 'sequence2', chars: 'GCGTAGCTCAGCTTCGATCCGATCGATATAAAGCTAGAGGAGGATCGGCTTCGATCGATTCTTAG' },
  { name: 'sequence3', chars: 'GCTTCGGAGCGGCTAGCTAGAGATAGCCGATCGATCGAGGCATTTAGGGGGATTATATTTCTCTA' }
];

const container = document.querySelector('.sequence-container');

// 计算每行可容纳的字符数
function getCharsPerLine() {
  const containerWidth = container.offsetWidth;
  const nameWidth = 100; // 和CSS中sequence-name的width保持一致
  // 获取单个等宽字符的宽度
  const charWidthEl = document.createElement('span');
  charWidthEl.textContent = 'A';
  charWidthEl.style.fontFamily = 'courier, monospace';
  charWidthEl.style.fontSize = '24px';
  document.body.appendChild(charWidthEl);
  const singleCharWidth = charWidthEl.offsetWidth;
  document.body.removeChild(charWidthEl);
  
  return Math.floor((containerWidth - nameWidth) / singleCharWidth);
}

// 渲染序列
function renderSequences() {
  container.innerHTML = '';
  const charsPerLine = getCharsPerLine();
  if (charsPerLine <= 0) return;

  // 计算需要拆分的总行数
  const maxSequenceLength = Math.max(...sequences.map(s => s.chars.length));
  const totalLines = Math.ceil(maxSequenceLength / charsPerLine);

  // 生成每一组行（对应一次换行后的内容）
  for (let lineIdx = 0; lineIdx < totalLines; lineIdx++) {
    const rowGroup = document.createElement('div');
    rowGroup.className = 'sequence-row-group';

    sequences.forEach(seq => {
      const row = document.createElement('div');
      row.className = 'sequence-row';

      const nameSpan = document.createElement('span');
      nameSpan.className = 'sequence-name';
      nameSpan.textContent = seq.name;

      const charsSpan = document.createElement('span');
      charsSpan.className = 'sequence-chars';
      // 截取当前行的字符片段，不足补空格保证对齐
      const start = lineIdx * charsPerLine;
      const end = start + charsPerLine;
      charsSpan.textContent = seq.chars.slice(start, end).padEnd(charsPerLine, ' ');

      row.appendChild(nameSpan);
      row.appendChild(charsSpan);
      rowGroup.appendChild(row);
    });

    container.appendChild(rowGroup);
  }
}

// 初始化渲染
renderSequences();
// 窗口大小变化时重新计算并渲染
window.addEventListener('resize', renderSequences);

效果说明 #

• 序列名称固定宽度，保证所有行的名称垂直对齐
• 使用等宽字体，确保字符严格对齐
• 窗口大小变化时自动重新计算每行可容纳字符数，重新渲染序列，换行后自动重复显示序列名称
• 长度不足的序列片段自动补空格，维持整体布局的对齐性

内容的提问来源于stack exchange，提问作者Christian Hoffmann