[quick application] there are many words in the text component. How to solve the problem that the div style next to it will be stretched

 【 Phenomenon description 】

When text When the content of components is more than one line , The adjacent div The style displays an exception , Will change from a normal circle to an ellipse .

The code is as follows ：

<template>

  <div class="container">

    <div style="align-items: center;">

       <div class="typscolor" style="background-color: blue; opacity: 0.26; margin-left: 16px;"></div>

      <text>{
   {text}}</text>

       <div class="typscolor" style="background-color: blue; opacity: 0.26; margin-left: 16px;"></div>

      <text>{
   {text}}</text>

       <div class="typscolor" style="background-color: blue; opacity: 0.26; margin-left: 16px;"></div>

      <text>{
   {text}}</text>

    </div>  

  </div>

</template>

<style>

  .container {

    flex-direction: column;

    justify-content: center;

    height: 100%;

  }

   text {

    font-size: 24px;

  }

  .typscolor {

      border-radius: 50%;

      width: 30px;

      height: 30px;

      background-color: red;

      margin-right: 8px; 

  }

</style>

<script>

  module.exports = {

    data: {

      text:'text When there is too much text, the circle on the left will be stretched '

    },

    onInit() {

    },

  }     

</script>

As shown in the figure

abnormal

normal

【 Problem analysis 】

When text When there are too many components ,flex When the width exceeds the layout, it will be automatically compressed , Which leads to div The label is stretched

【 resolvent 】

You can give div Label settings flex-shrink: 0 attribute , To solve the problem

The sample code is as follows ：

<template>

  <div class="container">

    <div style="align-items: center;">

       <div class="typscolor" style="background-color: blue; opacity: 0.26; margin-left: 16px;"></div>

      <text>{
   {text}}</text>

       <div class="typscolor" style="background-color: blue; opacity: 0.26; margin-left: 16px;"></div>

      <text>{
   {text}}</text>

       <div class="typscolor" style="background-color: blue; opacity: 0.26; margin-left: 16px;"></div>

      <text>{
   {text}}</text>

    </div>  

  </div>

</template>

<style>

  .container {

    flex-direction: column;

    justify-content: center;

    height: 100%;

  }

   text {

    font-size: 24px;

  }

  .typscolor {

      border-radius: 50%;

      width: 30px;

      height: 30px;

      background-color: red;

      margin-right: 8px; 

      flex-shrink: 0;   /* Add this attribute to solve the stretching problem */

  }

</style>

<script>

  module.exports = {

    data: {

      text:'text When there is too much text, the circle on the left will be stretched '

    },

    onInit() {

    },

  }     

</script>

As shown in the figure ：

For more details , Please see the ：
Huawei official website ：
https://developer.huawei.com/consumer/cn/forum/topic/0203908673278080243?fid=23?ha_source=zzh