使 <span> 移动到新行答案

【问题标题】：Make <span> move to new line使 <span> 移动到新行
【发布时间】：2021-08-09 20:01:03
【问题描述】：

我正在努力做到这一点，以便我可以更改 h2 - Magazine 中一个单词的样式。我设置了一个跨度来执行此操作，但无法将其放到新行（仍与文本的其余部分一致）。

.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);
}

.magazine {
  font-size: 30px;
  font-weight: 400;
  white-space: nowrap;
  border: 1px solid red;
}

<div class="col-3">
  <div class="rectangle right">
    <h2>TOAST<span class="magazine">Magazine</span></h2>
  </div>
</div>

【问题讨论】：

标签： html css newline

【解决方案1】：

将flex-direction: column; 添加到right h2

.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-direction: column;
}

.magazine {
  font-size: 30px;
  font-weight: 400;
  white-space: nowrap;
  border: 1px solid red;
}

<div class="col-3">
  <div class="rectangle right">
    <h2>TOAST<span class="magazine">Magazine</span></h2>
  </div>
</div>

【讨论】：

【解决方案2】：

CSS：

.magazine { display: block; }

【讨论】：

【解决方案3】：

Span 是内联元素，所以你应该设置 display : block;

【讨论】：

【解决方案4】：

啊，等一下，明白了-

CSS：

.right h2 { display: block }
.magazine { display: block }

【讨论】：