共计 524 个字符，预计需要花费 2 分钟才能阅读完成。
电商利用在展现某个产品时，须要在产品介绍后面加上标签，如下图中的“精选”，通过背景色来实现标签分类成果，让消费者直观看到，减少点击率和购买率。
尝试应用快利用 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/…
原文链接：https://developer.huawei.com/…
原作者：Mayism
正文完