vue css 处理行内换行背景样式被截断

代码

<template>
  <div style="margin: 100px;">
    <p>
      阿的说法大萨达书法倒是发放的萨达是发大水发的说法是打发斯蒂芬
      阿的说法大萨达书法倒是发放的萨达是发大水发的说法是打发斯蒂芬
      阿的说法大萨达书法倒是发放的萨达是发大水发的说法是打发斯蒂芬
      阿的说法大萨达书法倒是发放的萨达是发大水发的说法是打发斯蒂芬
      阿的说法大萨达书法倒是发放的萨达是发大水发的说法是打发斯蒂芬
      阿的说法大萨达书法倒是发放的萨达是发大水发的说法是打发斯蒂芬
      阿的说法大萨达书法倒是发放的萨达是发大水发的说法是打发斯蒂芬
      <span>
        个人搞如果让国人个人个人如果如果个人更让人更
        个人搞如果让国人个人个人如果如果个人更让人更
        个人搞如果让国人个人个人如果如果个人更让人更
        个人搞如果让国人个人个人如果如果个人更让人更
        个人搞如果让国人个人个人如果如果个人更让人更
      </span>
    </p>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="scss">
span {
  color: orange;
  padding: 0 0.5em;
  background: linear-gradient(red, green);
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
</style>

结果：

1682580837677.png