【微信小程序】文字环绕图片

司六米希

发布于 2022-11-15 19:07:12

4.6K0

文章被收录于专栏：司六米希司六米希

【微信小程序】文字环绕图片

1.实现方法
2.实现效果
3.代码

1.实现方法

image和text被view所包【view必须设宽度】
text属性增加【style=“word-break:break-all;”】
line-height: 1.5;用于设置行间距
image属性增加【float:right】

2.实现效果

3.代码

<view style="width: 100%; margin: 0 auto; ">
  <image src="../../asset/person.png" style="width: 200rpx; border-radius: 8px;height: 254rpx; float: right; display: block; box-sizing: border-box"hspace="15rpx" vspace="15rpx">
  </image>
  <text style="word-break:break-all;line-height: 1.5;">{{list[0].introduce}}</text> 
</view>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-03-20，如有侵权请联系 cloudcommunity@tencent.com 删除

break