Flexbox对齐项目溢出文本在顶部被切断[重复]答案

【问题标题】：Flexbox align-items overflow text get cuts off at top [duplicate]Flexbox对齐项目溢出文本在顶部被切断[重复]
【发布时间】：2018-07-30 06:37:00
【问题描述】：

我有以下情况，当文本不再适合容器时，文本在顶部被截断。我能做些什么来解决这个问题？如果文本小于容器，我仍然希望文本居中，并且我无法更改容器大小。

div {
  display: flex;
  align-items: center;
  width: 100px;
  height: 50px;
  overflow: auto;
  word-break: break-word;
}

<div>
  sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd
</div>

【问题讨论】：

标签： html css flexbox overflow

【解决方案1】：

这里的问题是由于当使用align-items（或justify-content）将弹性行项目居中时，根据设计，它会在其顶部/底部（或左/右）溢出。

为了解决这个问题，引入了一个新关键字safe，尽管目前还没有多少浏览器支持它。

How to use safe center with flexbox?

另一种选择是使用自动边距，尽管使用给定的标记你不能，因为文本没有内部包装（好吧，它有一个匿名的，尽管我们不能用CSS 选择器）。

因此，通过添加内部包装器 (fiddle with wrapper)，您可以使用自动边距，这里有很好的解释：

Can't scroll to top of flex item that is overflowing container

但有时我们只是无法更改标记，这时，这里有一个小技巧，使用伪元素，并在它们上使用自动边距。

要使文本垂直居中，我们还需要将 flex 方向设置为 column，以便在上方/下方呈现伪。

堆栈sn-p

div {
  display: flex;
  flex-direction: column;         /*  added  */
  width: 100px;
  height: 50px;
  overflow: auto;
  word-break: break-word;
  border: 1px solid gray;
}

div::before, div::after {
  content: '';
}
div::before {
  margin-top: auto;               /*  added  */
}
div::after {
  margin-bottom: auto;            /*  added  */
}

<div>
  sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd
</div>

<div>
  sdjhf
</div>

【讨论】：

【解决方案2】：

如果将文本包装到另一个标签中，并设置margin: auto 0;，它似乎运行良好。

div {
  display: flex;
  width: 100px;
  height: 50px;
  overflow: auto;
  word-break: break-word;
  background: pink;
  margin-bottom: 20px;
}

span {
  margin: auto 0;
}

<div>
  <span>sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd</span>
</div>

<div>
  <span>sdjhfkah</span>
</div>

【讨论】：