如何使垂直居中的多行文字在容器高度内显示完整？

垂直居中多行文字

在给定 HTML 代码中，容器.box允许其子元素垂直居中。然而，当子元素.box1的文本较多时，会超出容器高度。

要解决这个问题，可以为.box1添加如下样式：

align-items: center; /* 垂直居中 */
word-break: break-all; /* 换行单词和数字 */

.box1 {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  display: flex;
  align-items: center;
  word-break: break-all;
}

添加align-items: center;属性可垂直居中子元素，而word-break: break-all;属性允许单词和数字在容器中换行，从而避免超出容器高度。