<span> 移至新行

Question

我想让它，所以我可以改变一个词的风格在h2 -杂志。我设置了一个span来做到这一点，但不能让它到一个新的行(这仍然与文本的其余部分在一条线上)。

.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

添加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 2

CSS:

.magazine { display: block; }

Answer 3

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

Answer 4

啊，等等，知道了-

CSS:

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