When e-commerce applications display a certain product, they need to add a label in front of the product introduction. The “Select” in the picture below can realize the label classification effect through the background color, so that consumers can see it intuitively and increase the click rate and purchase rate.

Try using the Quick App A component and the SPAN component, but neither component supports setting the background color. This is implemented using two text components, but the second text does not wrap properly, leaving a gap in front of it. How to achieve the effect as shown in the picture below?

Solutions:

You can set postion: Absolute for the first text component and text-indent for the second text component to set the first line of text to the corresponding width.

Example code is as follows:

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

The operation effect picture is as follows:

For more details, see:

Quick application text component:

Developer.huawei.com/consumer/cn…

The original link: developer.huawei.com/consumer/cn…

Original author: Mayism