如何让Text组件每行文本的背景色之间存在间隔？

要让多行文本的每行背景色之间留出间隔，用CSS的几个属性就能搞定，直接上代码：

.text-line-gap {
  background: #ffeb3b; /* 设置你想要的背景色 */
  line-height: 2.4; /* 行高设得比正常大，用来留出间隔 */
  padding: 0 6px; /* 给文本左右加内边距，避免背景贴紧文字边缘 */
  background-clip: content-box; /* 让背景只覆盖文字内容区域，不占满整个行高范围 */
  box-decoration-break: clone; /* 强制每行的背景样式独立渲染 */
  -webkit-box-decoration-break: clone; /* 兼容Chrome、Safari这类webkit浏览器 */
}

把这个类名加到你的Text组件上就行。要是用React、Vue这类框架，直接给组件绑定这个类：

比如React里这么写：

<span className="text-line-gap">
  这里是多行测试文本，看看每行的背景是不是分开的。这里是多行测试文本，看看每行的背景是不是分开的。这里是多行测试文本，看看每行的背景是不是分开的。
</span>

原理很简单：通过line-height拉大每行的垂直空间，再用background-clip限制背景只在文字内容区域显示，最后用box-decoration-break让每行的背景样式单独生效，不会连成一片。

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