Question

我使用下面的html在我的网站上显示弹性视图。但是从div更改文本（文本的长度）会导致看起来很疯狂的自动化。

如何避免与此下面的特殊 div元素相关的大小调整？单击单击按钮时如何保持相同的布局？

编辑：我希望任何元素的大小和位置都不会改变。（无论里面有多少文字！）

＆＃13;
＆＃13;
const prodId = this.route.snapshot.paramMap.get('id');
＆＃13;
＆＃13;
＆＃13;

Answer 1

 .wrapper{
    width:100%; 
    background: black; 
    display: flex; 
    justify-content: space-around; 
    text-align: center; 
    color: white;
}

.wrapper > div{
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
}

    <div class="wrapper">
       <div>
           <div style="font-size: 17px">Info A</div>
           <div style="font-size: 29px;" id="text">text1</div>
       </div>
       <div>
           <div style="font-size: 17px">Info B</div>
           <div style="font-size: 29px;">text2</div>
       </div>
       <div>
           <div style="font-size: 17px">Info C</div>
           <div style="font-size: 29px;">text3</div>
       </div>
    </div>
    <br><br><br><br>
    <input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">

Answer 2

以下是解决方案：

document.addEventListener("click", function(e){
  if(e.target.id == "button")
  	document.getElementById('text').innerHTML+='.';
});

#navigation {
  position: fixed;
  width: 100%;
  height: 30%;
  left: 0%;
  top: 0%;
  background: black;
  display: flex;
  justify-content: space-around;
  text-align: center;
  color: white;
  flex-basis: 1 1 100%;
}
#navigation > div {
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}
#button {
  position: relative;
}

<div id="navigation">
   <div>
       <div style="font-size: 17px">Info A</div>
       <div style="font-size: 29px;" id="text">text1</div>
   </div>
   <div>
       <div style="font-size: 17px">Info B</div>
       <div style="font-size: 29px;">text2</div>
   </div>
   <div>
       <div style="font-size: 17px">Info C</div>
       <div style="font-size: 29px;">text3</div>
   </div>
</div>
<br><br><br><br>
<button id="button">click</button>

编辑：同时锁定tekst。我会这样做，左边对齐，然后添加一个填充：

#navigation > div > div:nth-child(2) {
  padding-left: 10%;
  text-align: left;
}

Answer 3

将flex: 1 0 33%;添加到您不想调整大小的元素。这相当于：

flex-grow: 1;
flex-shrink: 0;
flex-basis: 33%;

<div style="position: fixed; width:100%; height: 30%; left:0%; top: 0%; background: black; display: flex; justify-content: space-around; text-align: center; color: white">
   <div style="flex: 1 0 33%;">
       <div style="font-size: 17px">Info A</div>
       <div style="font-size: 29px;" id="text">text1</div>
   </div>
   <div style="flex: 1 0 33%;">
       <div style="font-size: 17px">Info B</div>
       <div style="font-size: 29px;">text2</div>
   </div>
   <div style="flex: 1 0 33%;">
       <div style="font-size: 17px">Info C</div>
       <div style="font-size: 29px;">text3</div>
   </div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">

Answer 4

以下是使用max-width代码的示例。第一个块永远不会比150px宽，并且将溢出的文本将被隐藏。

＆＃13;

.wrapper{
    width:100%; background: black; display: flex; justify-content: space-around; text-align: center; color: white;
}

.wrapper > div{
    flex: 1;
    text-overflow:ellipsis;
    overflow:hidden;
}

＆＃13;

<div class="wrapper">
   <div style="max-width: 150px">
       <div style="font-size: 17px">Info A</div>
       <div style="font-size: 29px;" id="text">text1</div>
   </div>
   <div>
       <div style="font-size: 17px">Info B</div>
       <div style="font-size: 29px;">text2</div>
   </div>
   <div>
       <div style="font-size: 17px">Info C</div>
       <div style="font-size: 29px;">text3</div>
   </div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">

＆＃13;

禁用固定flex的大小调整

4 个答案: