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

Posted 2023-03-05

【中文标题】Flexbox对齐项目溢出文本在顶部被切断[重复]

【英文标题】：Flexbox align-items overflow text get cuts off at top [duplicate]

【发布时间】：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>

【参考方案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>