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

Html – White space left after a line break

Is there any way to get rid of that white space after a line break?
If you highlight the text node only it actually requires less space that paragraph is trying to take.

.wrap {
  background: red;
  color: white;
  max-width: 470px;
}
<div class="wrap">
  <p>
    We weren't able to change your trading or correspondence address. Please try again or come back later.
  </p>
</div>

Example:
https://codepen.io/patryk-ptak/pen/yLGZjqE

@EDIT:
I mean this additional red space added after the line break.

enter image description here

I need that max-width property so removing it is not an option for me.

Tags:

3

Answers


  1. 0

    I don’t know if you can insert <br> in paragraph text, but it looks like solution:

    html

    <div class="wrap">
  <p>
    We weren't able to change your trading or correspondence address.
<br>Please try again or come back later.
  </p>
</div>

    CSS

    .wrap {
  max-width: 470px;
  width: max-content;
  background: red;
  color: white;
}
    Login or Signup to reply.
  2. 0 
    .wrap {
  background: red;
  color: white;
  /* max-width: 470px; */ 
}

/* this css for another way */
.wrap p span {
display: block;
}
    <div class="wrap">
  <p>
    We weren't able to change your trading or correspondence address. <br> Please try again or come back later.
  </p>
</div>


<div class="wrap">
  <p>
   <span>  We weren't able to change your trading or correspondence address. </span>          <span> Please try again or come back later.</span>   
  </p>
</div>

    remove max-width: 470px; and <br> as your requirement.
    and try also another way.

    Login or Signup to reply.
  3. 0 
    <div class="wrap">
  <p>
    We weren't able to change your trading or correspondence address.
  </p>
  <br/>
   <p>
     Please try again or come back later.
  </p>
</div>

    A combination of separating the elements into different paragraph tags, placing a line break in between, and changing the style to have an inline display will get rid of the extra space after the sentences.
    If you add a class to the paragraph elements, use that class to target the sentences, if not, you can use this updated CSS/selector:

    .wrap > * {
  background: red;
  color: white;
  max-width: 470px;
  display: inline;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search