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

Posted 2023-03-07

【中文标题】空白：nowrap；并且 flexbox 在 chrome 中不起作用

【英文标题】：white-space: nowrap; and flexbox did not work in chrome

【发布时间】：2016-04-28 08:06:36

【问题描述】：

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

【问题讨论】：

我相信要让text-overflow: ellipsis 工作，您还必须指定width（或flex-basis）。这就是您的 .lastname 课程中缺少的内容。

【参考方案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>

【讨论】：

这是一篇关于技巧的好文章。 css-tricks.com/flexbox-truncated-text

你从哪里得到flex-items默认是min-width:auto？

【参考方案2】：

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

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

【参考方案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