浅析uniapp调用view标签不换行问题

百变鹏仔 4周前 (11-20) #uniapp

文章标签换行

最近在使用uniapp开发小程序的过程中，遇到了一些关于view标签不换行的问题，这篇文章就来分享一下这个问题的解决方法。

在使用uniapp中，我们经常会用到view标签来进行页面布局，但有时候在页面布局的过程中，我们发现即使标签内的内容占据了一整行，该标签也不会自动换行，而是会导致页面宽度溢出，这时就需要使用一些技巧去解决这个问题。

1.使用flex布局

在view标签上加上flex属性，然后将其内部子元素用flex布局排列即可。

示例代码如下：

<view class="flex-wrap">  <view class="flex-item">item1</view>  <view class="flex-item">item2</view>  <view class="flex-item">item3</view></view>

.flex-wrap {  display: flex;  flex-wrap: wrap;}.flex-item {  width: 100px;  height: 100px;  border: 1px solid #ddd;  margin-right: 10px;  margin-bottom: 10px;}

运行结果：

2.使用grid布局

使用grid布局也可以解决标签不换行的问题，只需要为父元素设置display:grid;属性，然后在子元素上设置grid-column或grid-row属性。

示例代码如下：

<view class="grid-wrap">  <view class="grid-item item1"></view>  <view class="grid-item item2"></view>  <view class="grid-item item3"></view></view>

.grid-wrap {  display: grid;  grid-template-columns: repeat(auto-fill, 100px);  grid-gap: 10px;}.grid-item {  height: 100px;  border: 1px solid #ddd;}.item1 {  grid-column: 1/3;}.item2 {  grid-column: 3/5;}.item3 {  grid-column: 1/2;}

运行结果：

3.使用文本换行

如果内容是文本，并且需要自动换行的话，可以在view标签上设置white-space: normal;属性，这样就可以让文本自动换行了，但是如果内容是图片等元素，这种方法就不适用了。

示例代码如下：

<view class="text-wrap">  欢迎来到我的博客欢迎来到我的博客欢迎来到我的博客</view>

.text-wrap {  width: 200px;  white-space: normal;}

运行结果：

总结：

文章推荐

浅析uniapp调用view标签不换行问题

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项