如何使用CSS实现长短两种样式的悬挂式标签？

嘿，我刚好折腾过这种适配长短标签的悬挂式布局，完全能覆盖你说的定义列表、剧本对话、问答或者脚注编号这些场景！我给你整理了一个纯CSS的实现方案，语义化还好用，不用依赖任何外部工具。

先看HTML结构，我用了语义化的定义列表，当然你要是想用自定义的div结构也可以，不过<dl>在这类场景下最贴合语义：

<dl class="hanging-labels">
  <dt>L</dt>
  <dd>这是短标签对应的主文本，你会看到标签乖乖待在左边的空白区域里，主文本保持固定的缩进，后续换行也会对齐得整整齐齐。</dd>
  
  <dt>Label</dt>
  <dd>这是长标签对应的主文本，第一行文本会被长标签挤到右边，而后面的换行内容依然会保持固定的缩进量，完全符合你要的效果。</dd>
  
  <dt>超级长的标签内容超过固定缩进宽度了</dt>
  <dd>再试试这种超长篇的标签，你看第一行文本被推得更靠右，但后面的每一行都严格对齐固定缩进，不管标签多长都不会乱。</dd>
</dl>

然后是关键的CSS代码，逻辑很清晰，你一看就懂：

.hanging-labels {
  /* 给整个列表添点左右内边距，避免贴在屏幕边缘 */
  padding: 0 1rem;
  margin: 0;
}

.hanging-labels dt {
  /* 绝对定位，把标签拉到主文本的缩进区域里 */
  position: absolute;
  /* 这个值要和下面dd的margin-left完全一致，就是我们要的固定缩进量 */
  margin-left: -4em;
  /* 给标签加个右间距，和主文本分开点，看着更舒服 */
  padding-right: 0.5em;
}

.hanging-labels dd {
  /* 固定主文本的缩进量，这里设为4em，你可以根据需求随便调 */
  margin-left: 4em;
  /* 给每个条目添点上下间距，区分开不同内容 */
  margin-bottom: 0.8rem;
  /* 重置默认的dd样式，避免浏览器自带的边距干扰 */
  padding: 0;
}

/* 可选：让标签和第一行文本垂直居中对齐，看着更协调 */
.hanging-labels dt,
.hanging-labels dd {
  line-height: 1.5;
  vertical-align: baseline;
}

核心逻辑其实很简单：给主文本（<dd>）设置一个固定的左缩进，然后把标签（<dt>）绝对定位到这个缩进的负方向上。短标签的时候，标签完全藏在左空白里，不影响主文本的排列；长标签的话，因为标签本身宽度超过了固定缩进，就会自然把主文本的第一行挤到右边，而主文本的后续行因为有固定的margin-left，依然保持整齐的缩进，完美适配你要的两种场景！

你要是觉得缩进量不合适，直接改4em这个数值就行；要是想调整标签和文本的间距，调dt的padding-right就ok。而且用语义化标签的好处是，对屏幕阅读器友好，SEO也更友好哦。

内容来源于stack exchange