Symptom:

When the text component has a lot of content and multiple lines, the adjacent div style is displayed abnormally, changing from a normal circle to an ellipse.

The problem 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; } </script> module. Exports = {data: {text:'}}, onInit() {},} </script>

The running effect of the code is as shown in the figure below:



Figure 1 abnormal



Figure 2 normal

When the content of the Text component is too much, the width of the text component increases, and the width of the adjacent div is not enough, the Flex layout will automatically compress, and the div tag will be stretched.

Solution: You can fix this problem by assigning the flex-shrink: 0 attribute to the div tag and specifying no compression.

Modify the code 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; / / exports </style> <script> module. Exports = {data: }, onInit() {},} </script>

The running effect of the modified code is as shown in the figure below:

For more details, see:

Introduction to the Common Style of fast Application:

https://developer.huawei.com/…

The original link: https://developer.huawei.com/… By Mayism