html - 文本溢出 : ellipsis not working on nested flex container

<分区>

我知道这些帖子:

没有答案可以解决我在下面的代码片段中遇到的问题。这是 html 树:

父 flex 列
- 子 flex 行
  - 标签 flex(这样我就可以垂直对齐文本)

唯一能让它工作的方法是将标签设为 inline-block，但我真的很想保留 flex。

我已经做了什么:

关于 child :
- 设置空白:nowrap
- 设置最小宽度:0
- 设置溢出:隐藏
在 parent 身上
- 设置最小宽度:0
用 flex-grow: 1 和 max-width: 100%

.parent-container {
  align-items: stretch;
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
}

.item-container {
  border: 1px solid #ebf0ff;
  border-radius: 0.25rem;
  display: flex;
  flex-flow: row nowrap;
  height: 3.25rem;
  margin: 0.5rem 1rem;
  padding: 0.5rem 1rem;
}

.label {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  font-family: sans-serif;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<!DOCTYPE HTML>

<html>
<body>
  <div class="parent-container">
    <div class="item-container">
      <span class="label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
    </div>
  </div>
</body>
</html>

最佳答案

您需要为 .label 删除 flex 并对齐，使用 align-items: center; 作为其父项。

.parent-container {
  align-items: stretch;
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
}

.item-container {
  border: 1px solid #ebf0ff;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  height: 3.25rem;
  margin: 0.5rem 1rem;
  padding: 0.5rem 1rem;
}

.label {
  flex-flow: row nowrap;
  font-family: sans-serif;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<!DOCTYPE HTML>

<html>

<body>
  <div class="parent-container">
    <div class="item-container">
      <span class="label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
    </div>
  </div>
</body>

</html>

关于html - 文本溢出 : ellipsis not working on nested flex container，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58965720/

上一篇：css - 确定对特定选择器 Angular 指令的操作

下一篇：javascript - 动态下拉菜单样式选择器

html - Flexbox - 响应右对齐 UL 在 div 内？

css - 必要时将元素调整为两行

jQuery .fadeTo 添加元素

html - 是否可以根据一行中文本的长度来减小 div 的宽度？

css - 如何为旧 IE 制作没有 flexbox 的灵活 block

javascript - 基于页面分离 JS 文件是一种好的做法吗？

javascript - 如何在某些页面中隐藏 Angular layout.html 中的元素

javascript - 如何在文档中嵌入 HTML 元素

javascript - 通过操纵不透明度突出显示菜单中的元素