[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 technical articles , Welcome to visit https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh