Question 43795 in Html Question posted in
Some basic documentation can be found here.

<br> dont make new line – Html

I have this code:

.pt_t {
  font-family: arial;
  font-size: 20px;
  color: black;
  float: left;
  display: block;
}
.pt_p {
  font-family: arial;
  font-size: 40px;
  color: black;
  float: left;
  display: block;
}
<span class="pt_p">1. Line</span>
<br>
<span class="pt_t">2. Line</span>
<br>
<span class="pt_t">3. Line</span>
<span class="pt_t">is</span>
<span class="pt_t">here</span>

The first span and the second span should be in two lines, the third, fourth and fifth span in the same line.

Why my code dont work?

Tags:

5

Answers


  1. 0

    You can simple remove float : left; Like :

    body {
  background-color: white;
}

.pt_t {
  font-family: arial;
  font-size: 20px;
  color: black;
  display: block;
}

.pt_p {
  font-family: arial;
  font-size: 40px;
  color: black;
  display: block;
}
    <html>

<head>
</head>

<body>
  <span class="pt_p">Hello!</span>
  <br>
  <span class="pt_t">Some text</span>
  <br>
  <span class="pt_t">Lorem ispum</span>
</body>

</html>
    Login or Signup to reply.
  2. 0

    <br> tag works if you write in one tag only
    For example

    <span class="pt_p">Hello! <br>
  Some text</span>

    Also you can set display:flex flex-flow:column to the parent (body) to show it as column

    body {
  background-color: #202020;
  color: #ffffff;
  font-size: 16px;
}


.parent1 {
  display: flex;
  flex-flow: column;
  margin-bottom: 20px;
}
    <div class="parent1">
  <span>1 text</span>
  <span>2 text</span>
  <span>3 text</span>
</div>

<div class="parent2">
  <span>
    1 text <br>
    2 text<br>
    3 text<br>
  </span>
</div>
    Login or Signup to reply.
  3. 0

    By setting float: left; on each span you are basically bypassing <br>. With float, the element is removed from the normal flow of the page and placed on the left/right side of its container (body in this case), allowing other text to wrap around it.

    Just remove it:

    body {
  background-color: white;
}

.pt_t {
  font-family: arial;
  font-size: 20px;
  color: black;
  display: block;
}

.pt_p {
  font-family: arial;
  font-size: 40px;
  color: black;
  display: block;
}
    <html>

<head>
</head>

<body>
  <span class="pt_p">Hello!</span>
  <br>
  <span class="pt_t">Some text</span>
  <br>
  <span class="pt_t">Lorem ispum</span>
</body>

</html>
    Login or Signup to reply.
  4. 0

    A bad solution, if you really need float: left;, is just to add clear: both; to br:

    body {
  background-color: white;
}
.pt_t {
  font-family: arial;
  font-size: 20px;
  color: black;
  float: left;
  display: block;
}
.pt_p {
  font-family: arial;
  font-size: 40px;
  color: black;
  float: left;
  display: block;
}
br {
  clear: both;
}
    <span class="pt_p">Hello!</span>
<br>
<span class="pt_t">Some text</span>
<br>
<span class="pt_t">Lorem ispum</span>
    Login or Signup to reply.
  5. 0

    if you need float: left use display: grid:

    body {
    background-color: white;
}

.pt_div{
  display: grid;
}

.pt_t {
    font-family: arial;
    font-size: 20px;
    color: black;
    float: left;

}

.pt_p {
    font-family: arial;
    font-size: 40px;
    color: black;
    float: left;

}
    <!DOCTYPE html>
<html>
  <body>
    <div class="pt_div">
      <span class="pt_p">1. Line</span>
      <span class="pt_t">2. Line</span>
      <span class="pt_t">3. Line is here</span>
    </div>
    </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search