flex 列中的文本省略号答案

【问题标题】：Text ellipsis in a flex columnflex 列中的文本省略号
【发布时间】：2020-01-20 03:50:54
【问题描述】：

我试图让文本省略号在 flex 列布局中工作，在 flex 行内。一个用例是带有图标的选项卡之类的东西 - 所有选项卡都需要放在一行中，并且可能会被截断，并且选项卡具有内部列布局，因此图标位于文本上方。

可以让大小调整正常工作，但我无法找到一种方法来让截断工作同时保持水平灵活性。

我创建了 this plunkr 来演示 - 正如您在两个选项中看到的那样，拉伸工作正常，行包装器/列包装器被缩小以适应容器，但文本省略号一旦停止工作您将包装器切换为列。

<!DOCTYPE html>
<html>

<head>
</head>

<body>
<style>
.wrapper {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 16px;
  width: 100%;
  max-width: 250px;
}

.column-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 100px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.row-wrapper {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.ellipsis {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap
}
</style>

<div class="wrapper">
  <div class="column-wrapper">
    <p class="ellipsis">This is some very long text</p>
  </div>
  <div class="column-wrapper">
    <p class="ellipsis">This is some very long text</p>
  </div>
</div>
<div class="wrapper">
  <div class="row-wrapper">
    <p class="ellipsis">This is some very long text</p>
  </div>
  <div class="row-wrapper">
    <p class="ellipsis">This is some very long text</p>
  </div>
</div>
</body>
</html>

期望的结果是内部列以与内部行相同的方式截断。显然它仍然需要一个列来支持图标等。

仅供参考，这是https://github.com/ionic-team/ionic/issues/16532 的根本问题

仅供参考，可以使用 display: block 而不是 display:flex 作为列包装器，但这不支持这些容器所需的其他用例。

【问题讨论】：

@LGSon 我已经用可验证的样本更新了问题。
完美，赞成并撤回了我的近距离投票。

标签： html css flexbox

【解决方案1】：

您可以从column-wrapper 中删除align-items: center，并可能以另一种方式居中。或者，如果第一个示例的结果是您想要的，那么只需删除 align-items: center 就可以了

/* Styles go here */
.wrapper {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 16px;
  width: 100%;
  max-width: 350px;
}

.column-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 100px;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.row-wrapper {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h2>Internal row</h2>
    
    <div class="wrapper">
      <div class="row-wrapper">
        <p class="ellipsis">This is some very long text</p>
      </div>
      <div class="row-wrapper">
        <p class="ellipsis">This is some very long text</p>
      </div>
      <div class="row-wrapper">
        <p class="ellipsis">This is some very long text</p>
      </div>
    </div>
    
    <h2>Internal column</h2>
    
    <div class="wrapper">
      <div class="column-wrapper">
        <p class="ellipsis">This is some very long text</p>
      </div>
      <div class="column-wrapper">
        <p class="ellipsis">This is some very long text</p>
      </div>
      <div class="column-wrapper">
        <p class="ellipsis">This is some very long text</p>
      </div>
    </div>
  </body>

</html>

【讨论】：