空白：nowrap；并且 flexbox 在 chrome 中不起作用

Question

Chrome 的最新更新在 overflow: hidden 元素上使用 text-overflow: ellipsis; 打破了 white-space: nowrap。如何在不为name 类添加硬编码宽度的情况下解决此问题..

<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 部分。

.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

Answer 1

参考 - https://drafts.csswg.org/css-flexbox-1/#min-size-auto

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

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

那是

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>

Answer 2

text-overflow: ellipsis 与 width 属性一起使用

.lastname { 
  width: 525px;
  flex-grow: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

Answer 3

text-overflow: ellipsis 的其他变体 当内容width 必须是动态的时

html, body{
  width: 100%;
  padding: 0;
  margin: 0;
  }
  
body{
  padding-top: 10px
  }
  

.container{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  box-sizing: boder-box;
  width: 100%;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ddd
  }
  
.title{
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: #ddd
  }
  
.content{
  display: flex;
  flex-grow: 1;
  align-items: center;
  padding: 0 10px;
  overflow: hidden
  }
  
.wrapper{
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis
  }

.area{
  display: flex;
  flex: 0 0 auto;
  flex-grow: 0;
  padding: 0 10px;
  align-items: center;
  background-color: #ddd
  }

<div class="container">
  <div class="title">
      Title
  </div> 
  <div class="content">
    <div class="wrapper">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
  <div class="area">
    Options
  </div>
</div>

<div class="container">
  <div class="title">
      Title
  </div> 
  <div class="content">
    <div class="wrapper"> Lorem_Ipsum_isssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
    </div>
  </div>
  <div class="area">
    Options
  </div>
</div>

<div class="container">
  <div class="title">
      Title 1 | Title 2
  </div> 
  <div class="content">
    <div class="wrapper">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
  <div class="area">
    Options 1 | Options 2
  </div>
</div>

<div class="container">
  <div class="title">
      Title 1 | Title 2
  </div> 
  <div class="content">
    <div class="wrapper"> Lorem_Ipsum_isssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
    </div>
  </div>
  <div class="area">
    Options 1 | Options 2
  </div>
</div>

示例：https://codepen.io/Norfild/pen/KozJzg