如何用CSS实现多行文本的圆角裁剪背景效果

针对你要实现的多行文本不规则背景裁剪效果（类似参考图的样式），这里提供几个可行的前端实现方案：

方案1：纯CSS实现（推荐，无需JS） #

这个方案利用CSS的背景渐变和行内元素的背景克隆特性，快速实现每行文本左右斜切的背景效果：

/* 自定义变量方便调整样式 */
.cut-bg-text {
  --bg-color: #facc15; /* 背景色 */
  --cut-length: 18px; /* 两端裁剪的长度 */
  line-height: 1.7; /* 行高控制背景高度 */
  padding: 0 8px;
  display: inline;
  /* 用线性渐变实现两端透明、中间有色的背景 */
  background: linear-gradient(135deg, 
    transparent var(--cut-length), 
    var(--bg-color) var(--cut-length), 
    var(--bg-color) calc(100% - var(--cut-length)), 
    transparent calc(100% - var(--cut-length))
  );
  /* 关键属性：让换行后的每行背景独立渲染，不会断裂 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

对应的HTML结构很简单，直接把API返回的文本放到对应类名的标签里：

<p class="cut-bg-text">这里是从API获取的多行文本内容，测试第一行。这是第二行，用来验证换行后的背景裁剪效果。第三行继续测试，确保每行都能正确显示裁剪后的背景。</p>

方案2：JS拆分文本行 + 自定义裁剪形状 #

如果需要更复杂的裁剪形状（比如波浪形、多边形），可以通过JS把文本拆分为单独的行元素，再给每行应用clip-path：

步骤1：HTML结构 #

<div class="text-wrap" id="textWrap">API返回的多行文本内容，这里是第一行。第二行测试换行效果，第三行继续验证自定义裁剪的样式。</div>

步骤2：CSS样式 #

.text-line {
  background: #facc15;
  margin: 3px 0;
  padding: 0 10px;
  /* 自定义多边形裁剪路径，可根据需求修改坐标 */
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  display: block;
}
.text-wrap {
  width: 300px; /* 固定容器宽度，控制换行 */
}

步骤3：JS拆分文本行 #

这段代码会把文本按容器宽度拆分为单独的行，确保每行都能应用裁剪样式：

const wrap = document.getElementById('textWrap');
const originalText = wrap.textContent;
wrap.innerHTML = '';

// 计算行高（用临时元素获取）
const temp = document.createElement('span');
temp.style.visibility = 'hidden';
temp.style.position = 'absolute';
temp.textContent = 'x';
document.body.appendChild(temp);
const lineHeight = parseInt(getComputedStyle(temp).lineHeight);
document.body.removeChild(temp);

const words = originalText.split(' ');
let currentLine = [];
let currentWidth = 0;

words.forEach(word => {
  // 测试当前单词的宽度
  const testSpan = document.createElement('span');
  testSpan.textContent = word + ' ';
  document.body.appendChild(testSpan);
  const wordWidth = testSpan.offsetWidth;
  document.body.removeChild(testSpan);

  // 如果当前行加这个单词超过容器宽度，就创建新行
  if (currentWidth + wordWidth > wrap.offsetWidth) {
    const lineDiv = document.createElement('div');
    lineDiv.className = 'text-line';
    lineDiv.textContent = currentLine.join(' ');
    wrap.appendChild(lineDiv);
    currentLine = [word];
    currentWidth = wordWidth;
  } else {
    currentLine.push(word);
    currentWidth += wordWidth;
  }
});

// 添加最后一行
if (currentLine.length > 0) {
  const lineDiv = document.createElement('div');
  lineDiv.className = 'text-line';
  lineDiv.textContent = currentLine.join(' ');
  wrap.appendChild(lineDiv);
}

方案说明 #

• 方案1适合大多数场景，纯CSS实现，性能好，维护简单，调整变量就能修改样式。
• 方案2适合需要复杂裁剪形状的场景，缺点是需要JS处理文本换行，对动态内容需要重新计算。

内容的提问来源于stack exchange，提问作者TEJA SAI SANDEEP REDDY KONALA