如何实现带左侧边框的多字号堆叠标题，解决对齐及响应式适配问题

解决方案 #

这里给出兼容性好、响应式自适应的实现方案，核心思路是利用容器自动撑高的特性实现边框自适应，用行高替代负margin控制文本间距，搭配相对单位实现响应式适配：

实现效果特性 #

• 左侧边框自动贴合所有文本的上下沿，无需固定高度
• 文本间距自动适配字号，无硬编码负margin，缩放无错位
• 字号随屏幕宽度自动调整，无需写大量媒体查询
• 兼容所有现代浏览器，最低支持到IE11（clamp可替换为媒体查询兼容更低版本）

完整代码 #

HTML

<!-- 引入字体 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@300;400;500;700&display=swap" rel="stylesheet">

<body>
  <div class="title-wrap">
    <h1 class="title-row title-lg">Pablo</h1>
    <h2 class="title-row title-md">Emmanuel De Leo</h2>
    <p class="title-row title-sm">CG Supervisor / TD / Tool Development</p>
  </div>
</body>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}
.title-wrap {
  /* 左侧边框直接加在父容器上，高度自动等于内容高度 */
  border-left: 5px solid #f00;
  padding-left: 8px;
  font-family: 'Red Hat Text', sans-serif;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  /* 可根据需要调整整体对齐方式：left/center/right */
  align-items: flex-start;
  gap: 4px; /* 控制行与行的间距，全局统一调整，不用单独写负margin */
}
.title-row {
  /* 核心：行高设为1，消除不同字号自带的默认行高间距 */
  line-height: 1;
}
.title-lg {
  font-weight: 700;
  /* clamp实现响应式字号：最小50px，随视口宽度增长，最大100px */
  font-size: clamp(50px, 12vw, 100px);
}
.title-md {
  font-weight: 700;
  font-size: clamp(18px, 4vw, 34px);
  padding-left: 2px;
}
.title-sm {
  font-weight: 300;
  font-size: clamp(10px, 2vw, 15px);
  padding-left: 3px;
}

方案优势说明 #

1. 边框自适应：父容器title-wrap的左侧边框高度会自动跟随所有文本内容的总高度变化，不管字号怎么调整、文本怎么换行，都会自动对齐上下沿，完全不用硬写高度和定位偏移。
2. 间距可控：用line-height:1消除不同字号自带的多余行高，配合父容器的gap统一控制行间距，完全不用负margin，适配不同字号、不同字体的时候只需要调整gap数值即可。
3. 响应式友好：所有字号用clamp()设置，可自动根据屏幕宽度缩放，一行代码覆盖从移动端到桌面端的适配需求，不需要写多个媒体查询单独调整字号和间距。
4. 兼容性好：flex布局兼容到IE10，clamp()如果需要兼容更低版本浏览器，替换为对应断点的媒体查询设置固定字号即可，整体结构不需要改动。

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