寻求CSS解决方案：响应式多行标题每行独立背景实现

直接用单个元素配合CSS的box-decoration-break: clone属性就能解决换行后每行背景独立的问题，同时保留你需要的阴影和偏移效果，从零开始的实现方案如下：

1. 简化HTML结构 #

不需要额外嵌套容器，直接用一个标题元素承载内容：

<h3 class="card-title">{{ section?.title?.key | translate | uppercase }}</h3>

2. 核心CSS实现 #

$accent-color: #ff7e67; // 替换成你实际的主题色

.card-title {
  /* 基础字体样式，按需调整 */
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  
  /* 关键设置：让每行背景独立 */
  display: inline;
  background: $accent-color;
  
  /* 控制背景块的左右留白 */
  padding: 0.2em 0.8em;
  /* 控制每行背景之间的垂直间距 */
  line-height: 1.8;
  
  /* 换行后克隆样式（核心属性） */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  
  /* 圆角效果 */
  border-radius: 4px;
  /* 跟随每行背景的阴影 */
  filter: drop-shadow(7px 7px 0 rgba(255, 126, 103, 0.4));
  
  /* 可选：整体左偏移，替代原方案的left定位 */
  margin-left: 20px;
}

方案说明 #

• 去掉冗余嵌套结构，代码更简洁易维护。
• box-decoration-break: clone会让文本换行后，每行的背景、内边距、圆角都独立渲染，完美解决整块背景的问题。
• line-height设置为大于字体高度的值，自然实现每行背景之间的空隙。
• 使用filter: drop-shadow()替代原伪元素阴影，阴影会自动跟随每行的背景块形状，不会出现整块阴影的问题。
• 天生支持响应式：卡片容器宽度变化时，标题自动换行，每行背景自适应调整，无需额外媒体查询。

注意事项 #

• 兼容性：box-decoration-break: clone在Chrome、Firefox、Safari（需-webkit前缀）等现代浏览器均支持，无需考虑IE。
• 可根据设计需求调整line-height、padding、border-radius、阴影参数，匹配你的视觉风格。
• 如果需要标题占满卡片宽度，将display: inline改为display: inline-block并添加width: 100%即可，换行逻辑不受影响。

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