文本溢出:省略号在嵌套的 flex 容器中不起作用 [英] text-overflow: ellipsis not working in a nested flex container

问题描述

我有一个由按钮旁边的文本组成的组件.如果没有足够的可用空间，文本必须缩小并被截断.像这样:

.container .box {背景颜色:#efefef；填充:5px；边框:1px 实心 #666666;弹性:0 0 自动；}.container .text {弹性:1 1 自动；空白:nowrap；溢出:隐藏；文本溢出:省略号；}.容器 {显示:弹性；}

<div class="text">这是一个应该在需要时正确截断的文本.</div><div class="box">你好</div>

重要提示:要查看它是否有效，请最大化代码段并缩小浏览器窗口，以便看到文本被截断.

正如您所见，它运行良好.

在另一个弹性容器内

当我尝试将此组件放入另一个 flex 容器时，问题就出现了.

我的页面由一个固定的侧面区域和右侧的剩余部分组成，该部分根据剩余空间进行调整.我的组件必须适合第二部分，所以我把它放在那里:

.container .box {背景颜色:#efefef；填充:5px；边框:1px 实心 #666666;弹性:0 0 自动；}.container .text {弹性:1 1 自动；空白:nowrap；溢出:隐藏；文本溢出:省略号；}.容器 {显示:弹性；}.主要的 {显示:弹性；}.main .side {宽度:100px；背景颜色:#ff9900；弹性:0 0 自动；}.main .content {弹性:1 1 自动；}

<div class="side"></div><div class="内容"><div class="容器"><div class="text">这是一个应该在需要时正确截断的文本.</div><div class="box">你好</div>

在第二种情况下，文本不会缩小.我正在使用 Chrome，但在其他浏览器中看起来也有问题.

解决方案

解决方案

将 min-width: 0 添加到外部 flex item (.content/演示)

或

将 overflow: hidden 添加到外部 flex 项目 (.content/演示)

<小时>

说明

flex 容器的初始设置是 min-width: auto 在 flex 项目上.

这意味着弹性项目不能小于其内容的大小.

在您的原始代码中，由于overflow: hidden，文本框(一个弹性项目)变小了.

如果没有该规则，您将拥有与第二个示例相同的行为.

演示:当 overflow: hidden 被删除时，第一个示例的行为与第二个示例相同.

在第二个版本的代码中，主要的弹性项目是 .side 和 .content.

默认情况下，.content 不能短于它的内容(不管 flex-shrink)...直到你覆盖 min-width: auto 和 min-width: 0 或者，像第一个例子一样，应用 overflow: hidden.

来自规范:

<块引用>

4.5.Flex 的隐含最小尺寸项目

为了为弹性项目提供更合理的默认最小尺寸，这规范引入了一个新的 auto 值作为初始值CSS 2.1 中定义的 min-width 和 min-height 属性... 阅读更多

另一个例子参见:为什么 flex item 不缩小超过内容大小?

I have a component which consists of text next to a button. The text must shrink and get cut off if not enough space is available. Like this:

.container .box {
  background-color: #efefef;
  padding: 5px;
  border: 1px solid #666666;
  flex: 0 0 auto;
}

.container .text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container {
  display: flex;
}

<div class="container">
  <div class="text">This is a text that is supposed to get truncated properly when needed.</div>
  <div class="box">Hello</div>
</div>

Important: To see it working, maximize the snippet and shrink the browser window in order to see the text truncate.

And it works fine as you can see.

Inside another flex container

The problem comes when I try to put this component inside another flex container.

My page consists of a side area, fixed, and the remaining part on the right which adjust to the space remaining. My component must fit into this second part, so I put it there:

.container .box {
  background-color: #efefef;
  padding: 5px;
  border: 1px solid #666666;
  flex: 0 0 auto;
}

.container .text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container {
  display: flex;
}

.main {
  display: flex;
}

.main .side {
  width: 100px;
  background-color: #ff9900;
  flex: 0 0 auto;
}

.main .content {
  flex: 1 1 auto;
}

<div class="main">
  <div class="side"></div>
  <div class="content">
    <div class="container">
      <div class="text">This is a text that is supposed to get truncated properly when needed.</div>
      <div class="box">Hello</div>
    </div>
  </div>
</div>

In the second case, the text does not shrink. I am using Chrome but it looks like a problem also in other browsers.

解决方案

Solution

Add min-width: 0 to the outer flex item (.content / demo)

or

Add overflow: hidden to the outer flex item (.content / demo)

---

Explanation

An initial setting of a flex container is min-width: auto on flex items.

This means that a flex item cannot be smaller than the size of its content.

In your original code, the text box (a flex item) gets smaller due to overflow: hidden.

Without that rule, you'll have the same behavior as the second example.

Demo: When overflow: hidden is removed, first example behaves like second example.

In the second version of your code, the primary flex items are .side and .content.

By default, .content cannot be shorter than its content (regardless of flex-shrink)... until you override min-width: auto with min-width: 0 or, like the first example, apply overflow: hidden.

From the spec:

4.5. Implied Minimum Size of Flex Items

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1... read more

For another example see: Why doesn't flex item shrink past content size?

这篇关于文本溢出:省略号在嵌套的 flex 容器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！