如何实现内联元素相对于同级文本元素的双行换行布局？

核心思路 #

要让标签在同级文本的单行高度内换行两次，关键是让标签容器高度与文本行高保持一致，同时让标签内部文本的行高为容器高度的一半，再通过垂直对齐保证和文本排版统一。

具体实现代码 #

CSS 代码

/* 统一父容器：保证文本与标签的行高基准一致 */
.text-with-tags {
  line-height: 1.5; /* 控制文本行高，标签容器高度将继承此值 */
  font-size: 5cqw;
}

h1 {
  display: inline;
  margin: 0;
}

.custom-element {
  display: inline-block;
  cursor: pointer;
  border-radius: 0.25rem;
  background-color: black;
  height: 100%; /* 继承父容器行高，与文本单行高度完全匹配 */
  vertical-align: top; /* 与文本顶部对齐，避免排版偏移 */
}

.custom-element p {
  margin: 0;
  user-select: none;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: white;
  line-height: 0.75; /* 设为父容器行高的一半，实现单行高度内双行换行 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 保证标签文本在容器内垂直居中 */
  height: 100%;
}

HTML 代码

<div class="text-with-tags">
  <h1>FOR EVERY ONE LINE OF TEXT</h1>
  <div class="custom-element">
    <p>There should be</p>
  </div>
  <div class="custom-element">
    <p>two lines</p>
  </div>
  <div class="custom-element">
    <p>of these elements</p>
  </div>
  <div class="custom-element">
    <p>half the height of the sibling text</p>
  </div>
</div>

关键调整说明 #

• 新增统一父容器.text-with-tags，设置全局line-height，确保文本行高变化时，标签容器高度自动同步，适配屏幕尺寸变化。
• 标签容器.custom-element设为height: 100%并配合vertical-align: top，保证其高度与文本单行高度一致，排版对齐无偏移。
• 标签内部p元素通过line-height: 0.75（父容器行高的一半）实现单行高度内双行换行，同时用flex布局保证文本垂直居中，适配不同长度的标签内容。

原问题背景 #

需求目标

创建布局，使内联标签在同级文本的单行高度内换行两次，标签与文本高度对齐，且标签高度始终为文本的一半，换行后在下一行重复此布局逻辑。

期望效果

标签在文本单行高度内显示两行内容，整体高度与文本行高一致，排版对齐。

面临挑战

• 标签长度各不相同
• 文本高度随屏幕尺寸变化

已尝试方案

• 将标签的行高设置为文本行高的一半
• 将标签高度调整为文本高度的一半

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