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

最近更新的Chrome中断

空白：nowrap

使用

文本溢出：省略号溢出上的code>：隐藏的
元素。如何在
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>

文本溢出：省略号
与
宽度
属性一起使用

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

参考-

弹性项目的初始设置为
minwidth:auto
。那么为了
要使每个项目留在容器内，我们需要给出
最小宽度：0

添加<代码>最小宽度：0。在您的案例中，这是一个简单的解决方法

就是

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

片段


.container{
宽度：800px；
高度：80px；
显示器：flex；
边框：实心1px黑色；
利润率：10px；
}
.姓名{
显示器：flex；
最小宽度：0；
}
.名字{
宽度：100px；
背景颜色：灰色；
}
.姓{
柔性生长：1；
文本溢出：省略号；
溢出：隐藏；
空白：nowrap；
显示器：flex；
}
.这边{
flex-grow:0；
}
.side、.firstname、.lastname{
自对准：居中；
填充：0 20px；
}
问题
测试
如kjldashdk ja asdjhk ASDJK ASDJK ASDJK ASDJD asd asd asd asd asd asd asd as da asd asd asd as da asd asd asd as dasd asd asd as dasd asd asd as dasd asd asd as dasd as dasd asd asd asd as dasd a
选择权
预期结果
测试
作为一名asdjhk ASDJK ASDJK ASDJDKAJDH asd asd asd asd sa dad。。。
选择权
文本溢出的其他变体：省略号
当内容
宽度
必须是动态的时


html，正文{
宽度：100%；
填充：0；
保证金：0；
}
身体{
填充顶部：10px
}
.集装箱{
显示器：flex；
证明内容：之间的空间；
对齐项目：拉伸；
箱体尺寸：boder箱体；
宽度：100%；
垫底：10px；
边缘底部：10px；
边框底部：1px实心#ddd
}
.头衔{
显示器：flex；
flex:0自动；
证明内容：中心；
对齐项目：居中；
填充：10px；
背景色：#ddd
}
.内容{
显示器：flex；
柔性生长：1；
对齐项目：居中；
填充：0 10px；
溢出：隐藏
}
.包装纸{
宽度：100%；
溢出：隐藏；
文本溢出：省略号
}
.区域{
显示器：flex；
flex:0自动；
flex-grow:0；
填充：0 10px；
对齐项目：居中；
背景色：#ddd
}

标题
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
选择权
标题
SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS党卫军
选择权
标题1 |标题2
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
选项1 |选项2
标题1 |标题2
SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS党卫军
选项1 |选项2
我认为对于
文本溢出：省略号
要工作，还必须指定
宽度
（或
弹性基础
）。这就是您的
.lastname
类中缺少的内容。这是一篇关于技巧的好文章。默认情况下，从哪里获得
flex项
是
minwidth:auto
？您的示例不再有效
name {
  display: flex;
  min-width: 0;
}