CSS: How do I control the amount of space before/after lines of text?

[Darkmisc]

TL;DR Summary

I have a heading with an underline that lines up perfectly so long as the heading occupies only one line. However, when I change the screen width, the heading spreads across two lines. When this happens, the space before the lines of text gets extended and this affects where the underline starts.

I have a heading with an underline that lines up perfectly so long as the heading occupies only one line.

However, when I change the screen width, the heading spreads across two lines. When this happens, the space before the lines of text gets extended and this affects where the underline starts.

This is the code for the heading and underline:

const ParaText = styled.h2.attrs({
  className: "color1 Font SectionHeading",
})`
  font-family: roboto;
    display: inline-block;

  font-weight: 600;
  width:max-content;
  text-align: center;
  background:pink;
  position: relative;
padding-left:0;

  &::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 50%;
    height: 2px;
    background-color: currentColor;
  }


`;

width: min-content sort of works, but it makes my heading always take up four lines. I'd like it to always take up the minimum lines possible.

I could use media queries to push the underline further right, but I'd prefer to control the amount of space in front of the lines of text. Is there a way to do this?


Thanks

 

[Baluncore]

You know what software system you are using.
We can only guess.

 

[jedishrfu]

Is this a failure of the rendering engine to properly underline text you have marked for underlining?

Are you using the <u> tag to mark text for underling? and does this fail when you shrink the display window?

<u>BRANDS We</u> Work With

 

[Filip Larsen]

I'm no expert, but glancing at the CSS I would expect the (undesired) indent you observe really is centering originating from the text-align: center setting.

 

[DrJohn]

It certainly looks like the text is centered, mainly because that is stated in the CSS.

Centering text should be limited to headings, and never applied to body text, as the readability decreases when you try to find the start of the next line every time.

If you set a minimum width and maximum width for the container of the text, you will have a little bit more control over the layout, especially when things get narrow. You have five characters in Brands, and therefore if that is filling a line entirely, you will never get We Work (seven characters) on one line of the same width as Brands with no padding and no minimum width.

And as for the underline, are you sure that is not an <hr> of a fixed width, as there is no underline in the text's CSS, and the underline is clearly not applied to the text. An <hr> is a handy way to separate the end of one block of text from another.

So a bit more of the CSS and the body text is required for us to solve your problem.

 

[pbuk]

We can only guess.

True: my guess is that it is React JSX.

As it is the festive season (for me anyway), I am going to make some charitable comments:

• This code does not look as though it has been written by someone working within their comfort zone:
  • Why is the indentation inconsistent?
  • Why are there spaces after some colons but not others?
  • Why are there two empty lines before the closing `?
  • Why is a component that is intended to represent a heading called ParaText?
  • I am familiar with the convention that CSS class names that are derived from their component name should be PascalCase, so SectionHeading would make sense if the component was called SectionHeading (although it isn't), but why do you capitalize Font?
  • Why do you write the name of the font 'Roboto' as 'roboto'?
  • Why do you use display: inline-block; for a heading element?
• These things may seem trivial but they are not. Code that is presented in a standard way is easier to debug and maintain. This is important to you of course, but it is even more important if you want anyone else to help you.
• The second image is in a different font size. I would guess that this is set by a media query applied to the SectionHeading class, which is also probably changing the position of the border, however without knowledge of the styles actually applied to the element this is only guesswork. Learn how to use the Inspect Element tool of your web browser development plugin to see what styles are actually applied to the element. This is something you need to do for yourself, not ask other people to guess what is happening on the basis of incomplete information.

 

[DaveC426913]

Can you separate the HTML/CSS from your code base? We can't exactly debug the CSS if it's embedded in your app.

A great way to debug collaboratively is to reproduce the problem in https://codepen.io/

BTW, I am also at a loss as to what effect you're looking to achieve. Is this it?

Regardless, my suggestion is that you take finer control over the layout by tossing out the 'underline' text decoration and rebuild it directly with CSS.

 

[Darkmisc]

Is this a failure of the rendering engine to properly underline text you have marked for underlining?

Are you using the <u> tag to mark text for underling? and does this fail when you shrink the display window?

I probably shouldn't have called it an underline. I just wanted something to divide the heading from the section below. I used a pseudo element for the divider, but as mentioned by Dr John below, <hr> could also have done the job.

 

[Darkmisc]

It certainly looks like the text is centered, mainly because that is stated in the CSS.

Centering text should be limited to headings, and never applied to body text, as the readability decreases when you try to find the start of the next line every time.

If you set a minimum width and maximum width for the container of the text, you will have a little bit more control over the layout, especially when things get narrow. You have five characters in Brands, and therefore if that is filling a line entirely, you will never get We Work (seven characters) on one line of the same width as Brands with no padding and no minimum width.

And as for the underline, are you sure that is not an <hr> of a fixed width, as there is no underline in the text's CSS, and the underline is clearly not applied to the text. An <hr> is a handy way to separate the end of one block of text from another.

So a bit more of the CSS and the body text is required for us to solve your problem.

I should have used <hr> instead of a pseudo element.

Setting max-widths seems to be the trick. It's a lot easier than translating the divider.

 

[Darkmisc]

Can you separate the HTML/CSS from your code base? We can't exactly debug the CSS if it's embedded in your app.

A great way to debug collaboratively is to reproduce the problem in https://codepen.io/

BTW, I am also at a loss as to what effect you're looking to achieve. Is this it?
View attachment 354996


Regardless, my suggestion is that you take finer control over the layout by tossing out the 'underline' text decoration and rebuild it directly with CSS.

Thanks for the link.

Yeah, that's what I was aiming for. The dividing line was moving left to start where the pink area started. Looks like I can fix that with media queries to limit the width of the pink area.

 

[Darkmisc]

You know what software system you are using.
We can only guess.

It's React.