如何用CSS实现占文本高度50%垂直居中且兼容多行的自定义文本高亮

核心通过linear-gradient实现自定义高度的居中高亮背景，配合box-decoration-break: clone实现多行文本每行独立渲染样式，完美解决你遇到的所有问题。

完整实现代码 #

CSS 部分 #

.highlight {
  /* 基础排版配置 */
  display: inline;
  padding: 0 40px;
  line-height: 1.6; /* 可根据需求调整行高，不影响高亮效果 */
  /* 高亮核心配置 */
  background: linear-gradient(yellow 0 0);
  background-size: 100% 0.4em; /* 第二个参数即为高亮高度，对应你要求的约50%文本高度，可按需调整 */
  background-position: 0 50%; /* 实现高亮垂直居中 */
  background-repeat: no-repeat;
  /* 多行适配关键：让每行独立应用padding、背景样式 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

HTML 测试用例 #

<!-- 单行测试 -->
<div>
  <span class="highlight">This is the desired effect.</span>
</div>

<hr>

<!-- 多行测试，固定宽度触发换行 -->
<div style="width: 400px;">
  <span class="highlight">This works on both single line and multi line text, every line has 40px left and right padding, the highlight is 50% height of the text and vertically centered, no line overlap or broken effect.</span>
</div>

方案优势 #

完美解决你现有方案的所有问题：

• 所有行均可正常显示高亮，无仅最后一行显示的问题
• 不需要修改行高为极小值，不会出现文本重叠问题
• 高亮通过background-position控制垂直位置，可精准实现居中效果
• 每行都独立应用左右内边距，不存在第二行无padding的问题
• 行高正常，多行高亮之间有自然间隔，不会连为一块
• 兼容性良好，主流浏览器（Chrome、Firefox、Safari 15+）均支持，老版本Safari加-webkit-前缀即可兼容

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