如何让h2标签内的span元素单独换行且与其余文本对齐？

你当前为h2设置了display:flex，默认flex容器子元素会沿水平方向排列，所以包裹Magazine的span作为flex子项无法自动换行。调整flex容器的排列方向为纵向，即可实现两个文本分行显示，同时保留原有对齐逻辑。

修改后的完整CSS代码 #

.left h2,
.right h2 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.left h2 {
  font-size: 50px;
  font-family: 'Oleo Script', cursive;
}

.right h2 {
  width: 100%;
  font-family: 'Amiri', serif;
  font-size: 50px;
  border: 4px solid rgb(132, 132, 238);
  /* 新增属性，让flex子项纵向排列 */
  flex-direction: column;
  /* 如需两行左对齐，把上面的align-items改为flex-start即可，右对齐改为flex-end */
}

.magazine {
  font-size: 30px;
  font-weight: 400;
  white-space: nowrap;
  border: 1px solid red;
  /* 按需调整两行之间的间距 */
  margin-top: 6px;
}

你原有HTML结构不需要做任何修改，上述代码修改后即可实现TOAST和Magazine分两行显示，且两行对齐方式保持统一。

内容的提问来源于stack exchange，提问作者Laura Pasqualone