如何实现text起始位置设置背景色
实现 如何 设置 位置 Text 背景色 起始
2023-09-11 14:17:17 时间
电商应用在展示某个产品时,需要在产品介绍前面加上标签,如下图中的“精选”,通过背景色来实现标签分类效果,让消费者直观看到,增加点击率和购买率。
尝试使用快应用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
相关文章
- Cloudreve搭建云盘系统,并内网穿透实现公网访问
- netty系列之:在netty中实现线程和CPU绑定
- Javascript如何实现继承?
- uni-app - 手机端实现用户长按文本提示选取复制功能
- CSS - 实现横向滚动(横向滚动布局)
- 做软件测试,如何才能实现月入20K?
- 如何实现具有多个参数的Java 8的Function?
- 【ARK UI】HarmonyOS 如何实现新闻列表
- 如何实现text起始位置设置背景色
- 鸿蒙OS的系统调用是如何实现的? | 解读鸿蒙源码
- 实现左右两边用户添加、删除、调位置(上下移动)、排序等的功能
- 如何在OpenCV Python中实现概率Hough Transform?
- Spring Security 实战干货:如何实现不同的接口不同的安全策略
- ACCESS教程之如何实现基于关键词组合两个表、left join、字符串包含关系 excel和access联动(教程含详细操作方式)
- macOS Monterey 如何设置PPT演讲者模式实现电脑看备注投影看播放内容
- IOS开发UI篇--使用CAShapeLayer实现复杂的View的遮罩效果
- 【毕业设计_课程设计】面向高考招生咨询的问答系统设计与实现(源码+论文)
- 贵澳通过大数据农业创业来实现脱贫致富
- java 中针对敏感数字如何实现优雅的脱敏
- 如何实现text起始位置设置背景色
- 【快应用】快应用中如何实现tab页面切换时更新tab样式?
- QTP提供的编程接口实现对QTP操作
- 【校招Verilog快速入门】时序逻辑篇:VL22、根据状态转移图实现时序电路(FSM)
- 如何实现超大文件(60G)传输给别人?
- 实际工程Quartz与Spring设计与实现一体化的热部署
- iOS开发之网络编程--使用NSURLConnection实现文件上传
- C#实现对象序列化为XML
- 利用xcopy命令实现本地文件复制到远程服务器的方法
- springMvc项目集成cxf实现webService通信方式的详细步骤