How can I move text to the next line?-CodePudding

I am a beginner and doing my first easy challenge, but I got stuck anyway :D I want to move the text down, to the next line.

In particular, I want to make the text like this: Final result

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

CodePudding user response：

The p element will wrap automatically when there is a static width on the parent. This can also be done by using a static max-width on the element you want to constrain. You can also use margin to constrain the text relative to its parent. In your case, I used margin on second and main to allow the text to match the image you provided. Here is a simple demonstration:

.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 >
  <div >
    <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 >Improve your front-end skills by building projects</p>
  <p >
    Scan QR Code to visit front-end Mentor and take your coding skills to the next level
  </p>
</div>

CodePudding user response：

What you can do is put them separate divs This will put the words in another line.

If what you mean was that the text does not overflow, that would include CSS> Here is some of the code

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