如何在一段文字的开始位置设置背景色

奔跑的狮子

场景描述

电商应用在展示某个产品时，往往需要在产品介绍前面加上标签，如下图中的Featured，通过背景色来实现标签分类效果，从而让消费者直观看到，增加点击率和购买率。

尝试使用快应用a组件和span组件，但是两个组件均不支持设置背景色；使用两个text组件来实现，但是第二个text文字无法正常换行，换行时前面会留有空隙。那么如何才能达到如下图所示的效果呢？

xuetianshi

可以通过给第一个text组件设置postion：absolute，第二个text组件设置文本首行缩进属性text-indent，预留出对应的宽度，示例代码如下：

<template>
  <div style="flex-direction: column;">
    <div>
      <text id="11" style="background-color: #E34547;color:#FFFFFF;position: absolute;border-radius: 10px;margin-left: 5px">{{value}}</text>
      <text style="text-indent:{{kuan}};">Detailed description of a product.</text>
    </div>
  </div>
</template>
<style>
</style>
<script>
  module.exports = {
    data: {
      kuan: '',
      value: '精选'
    },
    onInit() {
      this.$page.setTitleBar({ text: '' })
      this.value=" Tag "
    },
    onShow() {
      '// Do something when show.'
      var that = this
      this.$element('11').getBoundingClientRect({
        success: function (data) {
          that.kuan = data.width + 20 + 'px'
          console.log("message", that.kuan);
          console.log('getBoundingClientRect succeeded, result data =' + JSON.stringify(data));
          console.log('getBoundingClientRect succeeded, result data =' + data.width,'hou',that.kuan);
        },
      });
    },
  }
</script>

运行效果图如下所示：