Question

我有以下情况，当文本不再适合容器内部时，文本会在顶部切断。我该怎么做才能解决这个问题？如果文字小于容器，我仍然希望文字居中，我无法改变容器的大小。

＆＃13;

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

＆＃13;

<div>
  sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd
</div>

＆＃13;

Answer 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，以便在上方/下方呈现伪。

Stack snippet

＆＃13;

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  */
}

＆＃13;

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

＆＃13;

Answer 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>

Flexbox对齐项目溢出文本在顶部被切断

2 个答案: