A brief analysis of the problem that uniapp calls view tags without line breaks

Recently, in the process of using uniapp to develop small programs, I encountered some problems with view tags not wrapping. This article will share the solution to this problem.

When using uniapp, we often use the view tag to layout the page, but sometimes during the page layout process, we find that even if the content in the tag occupies a whole row, the tag does not Will automatically wrap lines, but will cause the page width to overflow. At this time, you need to use some techniques to solve this problem.

1. Use flex layout

Add the flex attribute to the view tag, and then arrange its internal sub-elements using flex layout.

The sample code is as follows:

<view>
  <view>item1</view>
  <view>item2</view>
  <view>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;
}

Running results:

2. Use grid layout

Use grid layout also To solve the problem of labels not wrapping, you only need to set the display:grid; attribute for the parent element, and then set the grid-column or grid-row attribute on the child element.

The sample code is as follows:

<view>
  <view></view>
  <view></view>
  <view></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;
}

Running result:

3. Use text to wrap

If the content is text , and if you need to automatically wrap the text, you can set the white-space: normal; attribute on the view tag, so that the text can wrap automatically. However, if the content is an element such as an image, this method does not apply.

The sample code is as follows:

<view>
  欢迎来到我的博客欢迎来到我的博客欢迎来到我的博客
</view>

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

Run results:

##Summary:

The above are several solutions to view tags Methods without line breaks are relatively simple and easy to understand. Developers can choose different methods according to specific situations to achieve the best results.

The above is the detailed content of A brief analysis of the problem that uniapp calls view tags without line breaks. For more information, please follow other related articles on the PHP Chinese website!