電商應用在展示某個產品時，需要在產品介紹前面加上標簽，如下圖中的“精選”，通過背景色來實現標簽分類效果，讓消費者直觀看到，增加點擊率和購買率。
嘗試使用快應用a組件和span組件，但是兩個組件均不支持設置背景色；使用兩個text組件來實現，但是第二個text文字無法正常換行，換行時前面會留有空隙。如何才能達到如下圖所示的效果呢？
解決方法：
可以通過給第一個text組件設置postion：absolute，第二個text組件設置文本首行縮進屬性text-indent，預留出對應的寬度。
示例代碼如下：
|
1
2
3
4
5
|
<
template
>
<
div
style
=
"flex-direction: column;"
>
<
div
>
<
text
id
=
"11"
style
=
"#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/...
原作者：Mayism