使 <span> 移动到新行

Question

我正在努力做到这一点，这样我就可以改变 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>

Answer 1

CSS:

.magazine { display: block; }

Answer 2

Span 是行内元素，因此您应该设置 display : block;

Answer 3

将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>

Answer 4

啊，等等，知道了-

CSS:

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

使 <span> 移动到新行

Make <span> move to new line

html

css

newline