问题：

文本溢出：省略号不工作嵌套的flex容器[重复]

督坚白

2023-03-14

我知道这些帖子：

在flexbox中防止子元素溢出其父元素
flex子节点上的文本溢出省略号不工作
为什么flex项不缩小过去的内容大小？

没有答案从那里修复我在下面的代码片段中的问题。这是html树：

父柔性柱

子柔性行

标签flex（因此我可以垂直对齐文本）

我能让它工作的唯一方法是将标签设为内联块，但我真的希望保留flex。

我已经做了：

关于儿童：

设置空白：nowrap
设置最小宽度：0
设置溢出：隐藏

设置最小宽度：0

css prettyprint-override">.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>

共有2个答案

鲜于阳

2023-03-14

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

暨正真

2023-03-14

您需要删除的flex。标签要对齐，请使用对齐项目：居中用于其父级。

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

类似资料：

flex子级上的文本溢出省略号不工作[重复]

我的容器带有。我希望中间的孩子将占据整个空间，因此我将其设置为。到现在为止，一直都还不错。下一个级别是中间的孩子有2个孩子，所以我也想设置它flex（如果你失去了我，就跳到片段）和第一个孩子我设置省略号样式。现在，省略号停止工作。如果你会点击按钮，你会看到一切都好短的文字；有什么想法吗？
CSS文本溢出：省略号；不工作？

我不知道为什么这个简单的CSS不起作用... null null 应该在第4次“测试”前后切断
flex子项上的文本溢出省略号不起作用

问题内容：我有的容器。我希望中间的孩子能占据整个空间，所以我定了它。到目前为止，一切都很好。下一个级别是中间的孩子有2个孩子，因此我也希望将其设置为flex（如果您迷路了，请跳到摘要），第一个孩子设置省略号样式。现在，省略号停止工作。如果您单击该按钮，您会看到所有带有短文本的内容都很好；有任何想法吗？问题答案：添加到。其实，MOSH Feu的建议在他的回答，也应该工作，确实，跨浏览器
CSS文字溢出：省略号；不工作吗？

问题内容：我不知道为什么这个简单的CSS无法正常工作… 应该切断第四次“测试” 问题答案：仅在满足以下条件时起作用：元素的宽度必须限制为（像素）。宽度（百分比）无效。元素必须具有并设置。您在这里遇到问题的原因是因为您的元素的不受限制。您确实有一个设置，但是因为该元素设置为（即默认值），所以它忽略了它，并且也没有其他任何约束其宽度的方法。您可以通过执行以下任一操作来解决此问题：将元素设
文本溢出：省略号无效[重复]

我无法让工作，我希望有人能发现我找不到的错误。这是我的代码： HTML： CSS： JSFIDLE（JSIDLE）：http://jsfiddle.net/59m5e6ex/ 我找到了这个，但据我所知，我的满足了所有要求。
省略号在flex容器中不起作用

我正在尝试用flex创建一个布局（将是一个音乐播放器）。我有3个按钮（上一个、播放和下一个，用红色方块表示），我总是希望它们在同一条线上。然后，我想在按钮右侧显示一些歌曲信息（当前时间、歌曲标题和总时间）。我几乎总是希望总时间在最右边，歌曲标题填满剩余的宽度（使用），但随着窗口变小，用省略号截断。有人知道如何调整它以使其正常工作吗？ https://jsfiddle.net/13ohs7j

文本溢出：省略号不工作嵌套的flex容器[重复]

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档