如何将文本移动到下一行?

Question

我是初学者，正在做我的第一个简单的挑战，但我还是卡住了:D我想把文字往下移动到下一行

特别地，我想让文本像这样:最终结果

<div class="container">
<img src="/image-qr-code.png" alt="" />
<p class="main">Improve your front-end skills by building projects</p>
<p class="second">
Scan QR Code to visit front-end Mentor and take your coding skills to the next level
</p>
</div>

Answer 1

当父元素上有静态的width时，p元素将自动换行。这也可以通过在你想要约束的元素上使用静态max-width来完成。您还可以使用margin来约束相对于其父文本的文本。在您的情况下，我在second和main上使用margin，以允许文本与您提供的图像匹配。下面是一个简单的演示:

.container {
box-shadow: 1px 1px 13px 7px rgb(200 198 198);
width: 240px;
max-width: 240px;
padding: 1em;
border-radius: 5px;
margin: auto;
}
.contain {
background-color: blue;
border-radius: 5px;
display: flex;
justify-content: center;
padding: 1em;
}
img {
max-width: 100%;
}
.main {
font-weight: bold;
text-align: center;
margin: 1em 2em;
}
.second {
text-align: center;
margin: 1em 1em;
}

<div class="container">
<div class="contain">
<img src="https://dummyimage.com/150/000/fff&text=QR+CODE" https://stackoverflow.com/questions/72034538/how-can-i-move-text-to-the-next-line# alt="" />
</div>
<p class="main">Improve your front-end skills by building projects</p>
<p class="second">
Scan QR Code to visit front-end Mentor and take your coding skills to the next level
</p>
</div>

Answer 2

你能做的就是把它们分开这将把单词放到另一行。

如果你的意思是文本不溢出，那就包括CSS>下面是一些代码

html,
body {
margin: 0;
padding: 0;
background-color: rgb(174, 220, 239);
}
.container {
display: grid;
place-items: center;
padding-top: 300px;
}
form {
background-color: white;
width: 270px;
padding: 20px;
padding-top: 90px;
}

<div class="container">
<form action="">
<img src="/image-qr-code.png" alt="" />
<p class="main">Improve your front-end skills by building projects</p>
<div class="second">
<p>
Scan QR Code to visit front-end Mentor and take your coding skills to the next level
</p>
</div>
</form>
</div>