文本溢出省略号在嵌套 Flexbox 中不起作用

问题描述 投票：0回答：5

我有一个用弹性框创建的两列布局。

在右列中，我有两行，第一行包含标题，第二行包含页面内容。

在标题中，我有三列、一个按钮、一些文本和一个按钮。

我希望按钮位于列的左侧和右侧，文本占据任何额外的空间。

最后，我希望文本具有 

white-space:nowrap
和 
text-overflow:ellipsis
属性来截断长标题。

我的问题是这样的：我无法让文本换行在嵌套在另一个 Flexbox 中的 Flexbox 中正常工作，如这个小提琴所示：

http://jsfiddle.net/maxmumford/rb4sk3mz/3/

.container {
  display: flex;
  height: 100vh;
}
.left {
  width: 200px;
  background-color: yellow;
}
.right {
  flex: 1;
  background-color: blue;
  color: white;
}
.header {
  background: red;
  color: white;
  display: flex;
  flex-direction: row;
}
.header .content {
  white-space: nowrap;
  flex: 0 1 auto;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
}
.header .buttons {
  background: green;
  flex: 1 0 auto;
}
.header .content:hover {
  white-space: normal;
}
<div class="container">

  <div class="left">
    content left
  </div>
  <div class="right">
    <div class="header">
      <div class="buttons">buttons</div>
      <div class="content">
        This content is really long and should wrap with ellipses, but for some reason it doesn't work when it's nested in a container with display: flex
      </div>
      <div class="buttons">buttons</div>
    </div>
    content right
  </div>

</div>

但是，当标题未嵌套在弹性框中时，完全相同的代码可以工作：

http://jsfiddle.net/maxmumford/p7115f2v/1/

.header {
  background: red;
  color: white;
  display: flex;
  flex-direction: row;
}
.header .content {
  white-space: nowrap;
  flex: 0 1 auto;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
}
.header .buttons {
  background: green;
  flex: 1 0 auto;
}
<div class="header">
  <div class="buttons">buttons</div>
  <div class="content">
    This content is really long and is wrapped correctly... This content is really long and is wrapped correctly... This content is really long and is wrapped correctly... This content is really long and is wrapped correctly... This content is really long
    and is wrapped correctly... This content is really long and is wrapped correctly... This content is really long and is wrapped correctly...
  </div>
  <div class="buttons">buttons</div>
</div>

我怎样才能在第一小提琴中实现我想要的目标？

谢谢

html css flexbox ellipsis
5个回答
60
投票

您的代码中有两个问题导致省略号无法工作：

  1. div.right
    包含 
    div.header
    ，后者又包含按钮和文本。

div.right
是主容器 (
.container
) 中的弹性项目。

默认情况下，弹性项目不能小于其内容的大小。弹性项目的初始设置是 

min-width: auto
。

这意味着不换行的文本长度将为父 Flex 项目设置最小尺寸。使弹性项目缩小超过其内容的一种方法是将弹性项目设置为 

min-width: 0
。

您已经为 

.content
弹性项目完成了此操作，但还需要在 
.right
项目上进行设置。

  1. 您已将 
    .content
    元素设置为 
    flex: 0 1 auto
    。

这告诉弹性项目使用内容的大小（

flex-basis: auto
）。文本设置大小。

相反，将宽度设置为 0 并让 Flex 容器根据需要分配空间。 您可以使用 

flex: 1 1 0
来完成此操作，这与 
flex: 1
 相同。

.container {
  display: flex;
  height: 100vh;
}
.left {
  width: 200px;
  background-color: yellow;
}
.right {
  flex: 1;
  background-color: blue;
  color: white;
  min-width: 0;             /* NEW */
}
.header {
  background: red;
  color: white;
  display: flex;
  flex-direction: row;
}
.header .content {
  white-space: nowrap;
  flex: 1;                  /* ADJUSTMENT */
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
}
.header .buttons {
  background: green;
  flex: 1 0 auto;
}
.header .content:hover {
  white-space: normal;
}
<div class="container">

  <div class="left">
    content left
  </div>
  <div class="right">
    <div class="header">
      <div class="buttons">buttons</div>
      <div class="content">
        This content is really long and should wrap with ellipses, but for some reason it doesn't work when it's nested in a container with display: flex
      </div>
      <div class="buttons">buttons</div>
    </div>
    content right
  </div>

</div>

修订小提琴

6
投票

的价值观：

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

仅当元素的内容超过其宽度时才有效。

您可以设置

.header .content
的宽度：

.header .content {
    width: 50%;
}

它会按照您的预期工作：
http://jsfiddle.net/t82pqks4/

3
投票

上述解决方案在具有行和列的非常嵌套的 Flex 布局中对我不起作用。它使我的 

h3
标签比父标签更宽，因为 

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

但我意外地发现将 

display: inline-grid;
添加到父级解决了问题并正确应用了省略号。

我不确定这对你是否有帮助，但这对我来说是有帮助的。

0
投票

我遇到了类似的问题，但因为在我的情况下有多个嵌套的弹性项目，我发现通过在最后一个弹性项目内添加另一个子包装器并在其中包含文本来解决它更容易。我确保不为这个新子项设置

display: flex
，并在这个子项上添加其他三个属性空白、溢出和文本溢出。

-3
投票

我希望这个解决方案可以帮助某人，因为我发现其他任何解决方案都不起作用，因为我的页面是一个巨大的 Flexbox 嵌套组合。所以 min-width 0 不起作用，除了这个之外我尝试过的所有方法都不起作用。

在包含要换行的副本的 Flex 列内，您需要执行此操作。

.row {
  display: flex;
}

.col1 {
 position: relative;
 flex: 1 1 70%;
 overflow: hidden;
}

.nested {
  width: 100%;
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col2 {
  flex: 1 1 30%;
  padding-left: 1rem;
}
<div class="row">
  <div class="col1">
     <div class="nested">This is my really long copy that will push it out of the screen, and will not respect the elippse no matter what I do!!!</div>
  </div>
  <div class="col2">
    Last Text
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.