
在有 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;
}











