Une brève analyse du problème qu'Uniapp appelle afficher les balises sans sauts de ligne

Récemment, lors du processus d'utilisation d'uniapp pour développer de petits programmes, j'ai rencontré des problèmes avec les balises de vue qui ne s'encapsulaient pas. Cet article partagera la solution à ce problème.

Lorsque nous utilisons uniapp, nous utilisons souvent la balise view pour la mise en page, mais parfois pendant le processus de mise en page, nous constatons que même si le contenu de la balise occupe une ligne entière, la balise ne s'enroulera pas automatiquement, mais elle le fera. provoquer un débordement de la largeur de la page. À ce stade, vous devez utiliser certaines techniques pour résoudre ce problème.

1. Utiliser la disposition flex

Ajoutez l'attribut flex à la balise view, puis organisez ses sous-éléments internes à l'aide de la disposition flex.

L'exemple de code est le suivant :

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

Le résultat de l'exécution :

2. Utiliser la disposition en grille

L'utilisation de la disposition en grille peut également résoudre le problème des étiquettes qui ne s'enroulent pas. Il vous suffit de définir l'affichage : grille. ; pour l'élément parent, puis Définir les attributs de colonne de grille ou de ligne de grille sur les éléments enfants.

L'exemple de code est le suivant :

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

Résultat de l'exécution :

3. Utiliser l'habillage du texte

Si le contenu est du texte et doit être automatiquement renvoyé à la ligne, vous pouvez définir l'attribut white-space: normal ; sur la balise view, comme ceci Vous pouvez faire en sorte que le texte soit automatiquement renvoyé, mais si le contenu est constitué d'éléments tels que des images, cette méthode n'est pas applicable.

L'exemple de code est le suivant :

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

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

Résultats d'exécution :

Résumé :

Il existe plusieurs méthodes ci-dessus pour résoudre le problème du non-emballage des étiquettes de vue. Ces méthodes sont relativement simples et faciles à comprendre pour les développeurs. peut en choisir différents en fonction de la méthode de situation spécifique pour obtenir les meilleurs résultats.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!