text-overflow：省略号在嵌套的flex容器中不工作 [英] text-overflow: ellipsis not working in a nested flex container

问题描述

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

  .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>这是一个文本，应该在需要时正确截断。< / div> < div class =box> Hello< / div>< / div>  

重要提示：要使其正常工作，请最大化片段并缩小浏览器窗口以查看文本截断。

在另一个flex容器中

请尝试将此组件放在另一个弹性容器中。

我的页面包含一个固定的侧面区域，右边的其余部分调整剩余空间。我的组件必须适合第二部分，所以我把它放在那里：

  .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>这是一个文本，应该在需要时正确截断。< / div> < div class =box> Hello< / div> < / div> < / div>< / div>  

case，文本不收缩。

解决方案

解决方案

将 min-width：0 添加到外部flex项目（ .content / demo ）

或

向外部flex项目添加 overflow：hidden （ .content / demo ）

---

说明

flex容器的初始设置为 min-width：auto >

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

在原始代码中，由于 overflow：hidden ，文本框（flex项）变小。

该规则将与第二个示例具有相同的行为。

演示：当 overflow：hidden 被删除时，第一个示例的行为像第二个示例。

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

默认情况下， .content 不能短于其内容（不管 flex-shrink ）...，直到你用 min-width：0 重写 min-width：auto 第一个例子，应用 overflow：hidden 。

p>

4.5。 Flex的默认最小大小
项

$ b $ p

为了提供更合理的默认最小大小，规范引入了一个新的 auto 值作为
的初始值 min-width 和 min-height 在CSS 2.1 ... 阅读更多

有关另一个示例，请参阅：为什么Flex项目缩小不会超过内容大小？

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?

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