Flexbox Align-Items溢出文本在顶部被截断

Question

我遇到以下情况，当文本不再适合容器时，该文本会在顶部被截断。我该如何解决？如果文本比容器小，我仍然希望文本居中，并且我不能更改容器的大小。

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

<div>
  sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd
</div>

Answer 1

如果您将文本包装到另一个标签中，并设置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>

Answer 2

这里的问题是由以下事实引起的：当使用align-items（或justify-content）将flex行项目居中时，根据设计，它将在其顶部/底部（或左侧/右侧）溢出。

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

• 如何在Flexbox中使用安全中心？

另一种选择是使用自动页边距，尽管您不能使用给定的标记，因为文本没有内部包装器（嗯，它具有匿名包装器，尽管我们无法使用CSS选择器作为目标） 。

因此，通过添加一个内部包装器（用wrapper摆弄小提琴），您可以使用自动边距，这在这里有很好的解释：

• 无法滚动到容器溢出的弹性项目的顶部

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

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

堆栈片段

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>