Auto-line-wrap of long lines creates space gap despite very small line-height?

HTML & CSS
1

Occasionally I have web pages with a very long line (e.g. the URL of (another) web page).

This very long line is automatically cut and the remaining part automatically wrapped into the next line.

Good so far.

Unfortunately the browser creates a space gap (of e.g.3 pixels) between the first and the second line. The CSS show for this text

urltagline { font-size: 15px; line-height: 15px; }

Even if I reduce brutally the line-height to a much small value like:

urltagline { font-size: 15px; line-height: 10px; }

the space gap remains.

Why?

How can I reduce the space gap to 1 pixel (or even to no empty pixel row between them)?

2

HTML

<a class="link" href="https://www.sitepoint.com/community/t/auto-line-wrap-of-long-lines-creates-space-gap-despite-very-small-line-height/454925">https://www.sitepoint.com/community/t/auto-line-wrap-of-long-lines-creates-space-gap-despite-very-small-line-height/454925
</a>

CSS

.link {
   display: flex;
   line-height: 1;
   width: 20em; /* adjust value to suit */
 }
1 Like
3

Wouldn’t that be unreadable?

On which letter would you want to base the 1px gap? For example capital letters have no descenders so there is going to be a bigger gap with those letters and then you have the difference between ascenders and descenders so the letter ‘a’ is different from an ‘h’ or a ‘g’.

A font glyph is made of half-leading at top and bottom so there is space at the top and the bottom so that words can wrap and be readable. This will also vary as to what font has been used.

Notwithstanding the above then reducing the line-height will of course cause letters to overlap at some stage as can be seen in this simple demo.

To be honest I can’t think of a single use case where I would want text to touch when it wrapped. It may be that we need to see your example of the problem as we may be talking at cross-purposes:)

4 
.link {
   display: flex;
 }

was the key!
Thank you

5

Not exactly the key but allows the line-height to work.

It looks like you were trying to change the line-height on an inline element and that will have no effect on the height of the line as that is controlled by a block element parent. A flex grid or display:block element are just some of the elements that create a block display and will allow the line-height to take effect.

Note that you may have problems making the flex item wrap as it behaves differently from normal block elements. Also in the demo by @snadyleiby the text only wraps because of the dashes in the url. If it was unbroken text it would not wrap at all.

1 Like
6

Well spotted Paul. :winky:
It was remiss of me to not to have fully checked my CSS code. :rolleyes:

This is what I should have posted…

.link {
   display: flex;
   line-height: 1;
   width: 20em; /* adjust value to suit */
   word-break: break-word;
 }
1 Like