word-wrap 限制下如何实现多行文本垂直居中？

在有 word-wrap 限制的情况下实现多行文本垂直居中

在这个例子中，我们有一个限制，即 word-wrap: break-word;。在这种情况下，如何垂直居中多行文本？

解决方案：

要解决这个问题，我们可以使用以下 css 属性：

• align-items: center;：将子元素在父元素中垂直居中。
• word-break: break-all;：允许字母和数字在行尾换行，从而避免文本溢出。

修改后的 css 代码如下：

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

以上就是word-wrap 限制下如何实现多行文本垂直居中？的详细内容，更多请关注其它相关文章！