重现步骤
[步骤]
一、
template:
<div class="box">
<div class="left"></div >
<div class="right"><text>发撒法撒旦发射点发射点发射点发射点发生反对发射点给发射点发射点发发射点发射点发发射点发顺丰法撒旦发射点发射点发法撒旦飞洒地方撒打发十分</text>
</div >
</div >
style:
.box{flex-direction: row;}
.left{width:100px;}
.right{flex:1;}
以上布局及样式的效果为:
.right中的文本超出宽度后不会换行,一直在同一行显示并超出。此时box高度为一行文字高度
二、
在第一步的基础上更改right为:
.right{width:100px;}
然后right中的文本可以在100px位置换行,但是我想要自适应宽度的效果;此时box高度为正常情况下该段文字在100px宽度容器中撑起的高度
三、
在前两部基础上更改right样式为:
.right{width:100px;flex:1;}
此时,right元素可以正常自适应宽度,文本展示效果也是正常换行,但是此时box元素会被撑起一些多余的空白高度,经过我对比发现,这是的box高度和步骤二(只设置winth:100px;)的高度一致;也就是说宽度自适应了,但是高度没有(此处不确定是right高度没有自适应还是right撑起的box高度没有在right的宽度自适应之后自动缩回来)
这里说是box被撑起多余高度应该是因为我设置right的with为100px(小于自适应后的right宽度)。如果right的width设置为n(一个大于right自适应后宽度的数值)px时,box的高度应该是塌陷状态,及box高度小于right文本自适应宽度后应有的高度;所以这个box的高度问题,我感觉应该是页面加载时先按照100px(style中设定的width)渲染了right,right中的文本按100px的宽度正常撑起right和box的高度,然后再通过flex:1;属性去自适应right的宽度,文本又按照right自适应后的宽度进行重拍,但是这时的box或right的高度没有进行更新,导致的这个问题。不知道对不对,这是我的结论,仅供参考;
[结果]
我将第三步时的代码放在正常的html页面用浏览器打开后,并没有这样的问题,宽度高度都能自适应;
[期望]
期望第三步时的代码在nvue下和在h5中展示效果一样
IDE运行环境说明
HBuilderX
[IDE版本号]
2.2.1
windows10
uni-app运行环境说明
app
自定义组件模式
IOS 11.3
iphone7 plus
联系方式
[QQ]
1187875445
8***@qq.com
view 包 image view高度总是会多几像素 给view 加上 flex 高度就正常了 神奇
2019-12-14 16:44