当前位置:网站首页>【快应用】text组件里的文字很多,旁边的div样式会被拉伸如何解决
【快应用】text组件里的文字很多,旁边的div样式会被拉伸如何解决
2022-07-02 07:15:00 【华为开发者论坛】
【现象描述】
当text组件的内容较多多行显示的时候,相邻的div样式会显示异常,会从正常的圆形变为椭圆。
代码如下:
<template>
<div class="container">
<div style="align-items: center;">
<div class="typscolor" style="background-color: blue; opacity: 0.26; margin-left: 16px;"></div>
<text>{
{text}}</text>
<div class="typscolor" style="background-color: blue; opacity: 0.26; margin-left: 16px;"></div>
<text>{
{text}}</text>
<div class="typscolor" style="background-color: blue; opacity: 0.26; margin-left: 16px;"></div>
<text>{
{text}}</text>
</div>
</div>
</template>
<style>
.container {
flex-direction: column;
justify-content: center;
height: 100%;
}
text {
font-size: 24px;
}
.typscolor {
border-radius: 50%;
width: 30px;
height: 30px;
background-color: red;
margin-right: 8px;
}
</style>
<script>
module.exports = {
data: {
text:'text文本内容过多时左边的圆圈会被拉伸'
},
onInit() {
},
}
</script>
如图所示
异常
正常
【问题分析】
当text组件内容过多时,flex布局的时候宽度超出会自动压缩,从而导致div标签被拉伸了
【解决方法】
可以给div标签设置flex-shrink: 0属性,即可解决该问题
示例代码如下:
<template>
<div class="container">
<div style="align-items: center;">
<div class="typscolor" style="background-color: blue; opacity: 0.26; margin-left: 16px;"></div>
<text>{
{text}}</text>
<div class="typscolor" style="background-color: blue; opacity: 0.26; margin-left: 16px;"></div>
<text>{
{text}}</text>
<div class="typscolor" style="background-color: blue; opacity: 0.26; margin-left: 16px;"></div>
<text>{
{text}}</text>
</div>
</div>
</template>
<style>
.container {
flex-direction: column;
justify-content: center;
height: 100%;
}
text {
font-size: 24px;
}
.typscolor {
border-radius: 50%;
width: 30px;
height: 30px;
background-color: red;
margin-right: 8px;
flex-shrink: 0; /*加上该属性即可解决拉伸问题*/
}
</style>
<script>
module.exports = {
data: {
text:'text文本内容过多时左边的圆圈会被拉伸'
},
onInit() {
},
}
</script>
如图所示:
欲了解更多详情,请参见:
华为官网:
https://developer.huawei.com/consumer/cn/forum/topic/0203908673278080243?fid=23?ha_source=zzh
边栏推荐
- nodejs+express+mysql简单博客搭建
- SQOOP 1.4.6 INSTALL
- MongoDB 学习整理(条件操作符,$type 操作符,limit()方法,skip() 方法 和 sort() 方法)
- Pywin32打开指定窗口
- Dialogue Wu Gang: why do I believe in the rise of "big country brands"?
- 转换YV12到RGB565图像转换,附YUV转RGB测试
- 记录 AttributeError: ‘NoneType‘ object has no attribute ‘nextcall‘
- flume 190 INSTALL
- Kustomize user manual
- Operator-1初识Operator
猜你喜欢
Dialogue Wu Gang: why do I believe in the rise of "big country brands"?
Shapiro Wilk normal analysis by SPSS
13.信号量临界区保护
使用Windbg静态分析dump文件(实战经验总结)
Considerations for Apache deploying static web page projects
nodejs+express+mysql简单博客搭建
MongoDB 学习整理(条件操作符,$type 操作符,limit()方法,skip() 方法 和 sort() 方法)
Win11 arm系统配置.net core环境变量
SUS系统可用性量表
4. Random variables
随机推荐
PCL 点云转深度图像
4. Random variables
Transport Optimization abstraction
Operator-1初识Operator
13. Semaphore critical zone protection
sqoop的表的导入
Is this code PHP MySQL redundant?
使用sqlcipher打开加密的sqlite方法
Internet News: Tencent conference application market was officially launched; Soul went to Hong Kong to submit the listing application
SPSS做Shapiro-Wilk正态分析
Dialogue Wu Gang: why do I believe in the rise of "big country brands"?
[jetbrain rider] an exception occurred in the construction project: the imported project "d:\visualstudio2017\ide\msbuild\15.0\bin\roslyn\microsoft.csh" was not found
2.hacking-lab脚本关[详细writeup]
4.随机变量
flume 190 INSTALL
02-taildir source
618 what is the secret of dominating the list again? Nike's latest financial report gives the answer
C#中索引器
数据库字典Navicat自动生成版本
[SUCTF2018]followme