空白:nowrap;和flexbox在chrome中不起作用 [英] white-space: nowrap; and flexbox did not work in chrome

问题描述

最近的Chrome更新使用overflow: hidden元素上的text-overflow: ellipsis;中断了white-space: nowrap.如何解决此问题而不在name类上添加硬编码的宽度.

Recent update of Chrome breaks white-space: nowrap using text-overflow: ellipsis; on a overflow: hidden element. How to fix that without adding hard-coded width on name class..

<h1>problem</h1>
<div class="container">
  <div class="name">
    <div class="firstname">
      test
    </div>
    <div class="lastname">
      as kjldashdk ja asdjhk ashdjk ashdjk asdjasdkajsdh akjsd asd asd asd asd asd asd as das da asdas dasd asda sdasd as dasd asd asd as dasd a
    </div>
  </div>  
  <div class="side">
    options
  </div>
</div>

结构不应更改，因为我在应用程序的其他地方重用了.name部分.

The structure should not change because I reuse the .name section somewhere else in my app.

.container {
  width: 800px;
  height: 80px;
  display: flex;
  border: solid 1px black;
  margin: 10px;
}
.name {
  display: flex;
}
.firstname {
  width: 100px;
  background-color: grey;
}
.lastname {
  flex-grow: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.side {
  flex-grow: 0;
}
.side, .firstname, .lastname {
  align-self: center;
  padding: 0 20px;
}

http://codepen.io/anon/pen/xZpMYg

推荐答案

参考-

弹性项目的初始设置为min-width: auto.所以，为了 每个要保留在容器中的物品，我们需要给出min-width: 0.

The initial setting on flex items is min-width: auto. So, in order for each item to stay within the container, we need to give min-width: 0.

添加min-width: 0;.在您的情况下，这是简单的解决方法.

Add min-width: 0;. This is the easy workaround in your case.

那是

name {
  display: flex;
  min-width: 0;
}

代码段

.container {
  width: 800px;
  height: 80px;
  display: flex;
  border: solid 1px black;
  margin: 10px;
}
.name {
  display: flex;
  min-width: 0;
}
.firstname {
  width: 100px;
  background-color: grey;
}
.lastname {
  flex-grow: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
}
.side {
  flex-grow: 0;
}
.side, .firstname, .lastname {
  align-self: center;
  padding: 0 20px;
}

<h1>problem</h1>
<div class="container">
  <div class="name">
    <div class="firstname">
      test
    </div>
    <div class="lastname">
      as kjldashdk ja asdjhk ashdjk ashdjk asdjasdkajsdh akjsd asd asd asd asd asd asd as das da asdas dasd asda sdasd as dasd asd asd as dasd a
    </div>
  </div>  
  <div class="side">
    options
  </div>
</div>

<h1>expected result</h1>

<div class="container">
  <div class="name">
    <div class="firstname">
      test
    </div>
    <div class="lastname">
      as kjldashdk ja asdjhk ashdjk ashdjk asdjasdkajsdh akjsd asd asd asd asd sa dad...
    </div>
  </div>  
  <div class="side">
    options
  </div>
</div>

这篇关于空白:nowrap;和flexbox在chrome中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！