如何实现text起始位置设置背景色

Posted 华为开发者论坛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何实现text起始位置设置背景色相关的知识,希望对你有一定的参考价值。

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

尝试使用快应用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

以上是关于如何实现text起始位置设置背景色的主要内容,如果未能解决你的问题,请参考以下文章

如何设置div的背景色?我的这段css没有作用?

背景色实现按钮分隔线

学习笔记 - WordWPS分别设置背景色

学习笔记 - WordWPS分别设置背景色

学习笔记 - WordWPS分别设置背景色

用Java设置Excel背景色?