白色-space: nowrap;并且 flexbox 在 chrome 中不起作用

Question

Chrome 最近的更新中断了 white-space: nowrap 在 overflow: hidden 元素上使用 text-overflow: ellipsis;。如何在不在 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 部分。

.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

text-overflow: ellipsis 与 width 属性

一起工作

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

Answer 2

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

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;。这是针对您的情况的简单解决方法。

也就是

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 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

白色-space: nowrap;并且 flexbox 在 chrome 中不起作用

white-space: nowrap; and flexbox did not work in chrome

css

overflow

flexbox

ellipsis

nowrap