html - 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的根本问题

FYI2可以使用display：块来代替列包装器的display：flex来工作，但是这将不支持这些容器的其他必需用例。

最佳答案

您可以从align-items: center中删除column-wrapper并以其他可能的方式将项目居中。或者，如果您想要的是第一个示例中的结果，则只需删除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>

关于html - flex 列中的文字省略号，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58005460/