如何實現text起始位置設定背景色

　 電商應用在展示某個產品時，需要在產品介紹前面加上標籤，如下圖中的“精選”，透過背景色來實現標籤分類效果，讓消費者直觀看到，增加點選率和購買率。

嘗試使用快應用a 元件和span 元件，但是兩個元件均不支援設定背景色；使用兩個text 元件來實現，但是第二個text 文字無法正常換行，換行時前面會留有空隙。如何才能達到如下圖所示的效果呢？

 

解決方法：

可以透過給第一個text 元件設定postion ：absolute ，第二個text 元件設定文字首行縮排屬性 text-indent，預留出對應的寬度。

示例程式碼如下：

<template>
  <div style="flex-direction: column;">
    <div>
      <text id="11" style="background-color: #00ff7f;position: absolute;border-radius: 10px;margin-left: 5px">{{value}}
</text>

執行效果圖如下所示：

欲瞭解更多詳情，請參見：

快應用text 元件：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-component-text

原文連結： https://developer.huawei.com/consumer/cn/forum/topic/0202441175921620414?fid=18

原作者：Mayism