如何实现文字跨行断开的标题样式？

你要的这种标题效果属于边框/伪元素结合布局的实现范畴，以下是两种常见场景的具体实现方案：

一、文字居中，两侧带横线的标题（对应示例图效果） #

这是最常见的分割式标题，有两种简洁实现方式：

1. Flex布局实现（推荐） #

利用flex布局快速分配空间，用伪元素生成两侧横线：

<h2 class="split-title">我的标题</h2>

.split-title {
  display: flex;
  align-items: center;
  gap: 16px; /* 调整文字与横线的间距 */
}
.split-title::before,
.split-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: #ccc; /* 自定义横线颜色 */
}

2. 背景渐变实现 #

适合需要渐变横线的场景，通过伪元素生成全屏渐变线，再用文字背景遮挡中间区域：

<h2 class="split-title"><span>我的标题</span></h2>

.split-title {
  position: relative;
  text-align: center;
}
.split-title::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, #ccc, transparent 20%, transparent 80%, #ccc);
  transform: translateY(-50%);
}
.split-title span {
  display: inline-block;
  background-color: #fff; /* 需与页面背景色一致 */
  padding: 0 16px;
}

二、文字被横线贯穿的效果（行中间断开文字） #

如果是需要一条横线直接穿过文字中间，可通过绝对定位伪元素实现：

<h2 class="line-through-title">我的标题</h2>

.line-through-title {
  position: relative;
  display: inline-block;
}
.line-through-title::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #ff4444; /* 自定义横线颜色 */
  transform: translateY(-50%);
}

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