如何对齐innerHTML中的文本？换行后内容无法对齐的解决方法

问题根源在于你用行内元素span承载内容，换行后新行会从父元素最左侧开始，无法和其他条目对齐。用CSS Grid布局就能快速修复，让每个条目里的标签和内容分成两列，固定标签列宽度，内容列自动填充剩余空间。

修改后的完整代码： #

HTML

<h1>DEPARTMENT: <span class="a" id="department"></span></h1>
<h1>LOCATION: <span class="a" id="location"></span></h1>
<h1>INDIVIDUAL: <span class="a" id="people"></span></h1>
<h1>PHONE: <span class="a" id="phone"></span></h1>

CSS

h1 {
  /* 将每个h1转为两列布局 */
  display: grid;
  /* 第一列宽度适配最长标签（比如"INDIVIDUAL:"），可自行调整数值 */
  grid-template-columns: 130px auto;
  /* 让内容与标签顶部对齐 */
  align-items: start;
  /* 调整条目间距，避免过于拥挤 */
  margin: 10px 0;
}

span.a {
  background-color: yellow;
  /* 无需固定宽高，让内容自适应 */
}

JS

// 示例数据，可替换为你的实际变量
const department = ["技术部"];
const locationA = ["北京总部"];
const peopleCurrentVarStr = "张三,李四,王五";
const phoneNumberStr = "138XXXX1234,139XXXX5678";
const i = 0;

document.getElementById("department").innerHTML = department[i];
document.getElementById("location").innerHTML = locationA[i];
document.getElementById("people").innerHTML = peopleCurrentVarStr.replace(/,/g, "<br>");
document.getElementById("phone").innerHTML = phoneNumberStr.replace(/,/g, "<br />");

效果说明 #

每个h1被拆分为固定宽度的标签列和自适应的内容列，内容换行后会始终处于内容列范围内，和其他条目的内容自然对齐，彻底解决错位问题。

内容的提问来源于stack exchange，提问作者Spencer Storm