Using CSS to reduce space between lines of wrapped text

HTML & CSS
1

I have a page: www.rcda.org/masstimes.asp

Some of the mass times have a comment below the mass time. When the comment is to long to fit on one line, it wraps as expected but there is too much space between the lines. I have tried reducing the line height to 0px but that does not help. I then thought that it could be some kind of padding or margin but the code explorer in FF does not show any padding or margin.

Can someone explain to me how to get the wrapped text to be closer together?

2

Are you sure that’s the correct link? I’m just getting a 404 error.

3

Hi, the url you posted has a typo: the page file is spelled “/mass_times.asp” :slight_smile:

Try give the comment span style a display:inline-block; rule. (I suggest 1 as a lowest readable line-height)

The span is an inline element resident on a text line and can’t change the line-height. With inline-block display it will act as a block and a block element has the capability to format its content.

2 Likes
4

Hy…
Not an option to put line-height to the li instead of using negative margin?

Or you could set your a’s to display:block, apparently the line-height is ignored for a-elements? (i’ll leave the explanation to someone else :slight_smile:

Post edited by TechnoBear to remove fake signature

5

Erik already explained it above :slight_smile:

1 Like
6

Hi @RCDAwebmaster, To my post I’d like to add a suggestion for the space adjustment above the comment.

I also suggest that you take advantage of that the inline-block itself sits on a text line and has the capability as inline to take a vertical-align rule.

So try also give the comment spans a vertical-align:top; rule. That will give all comments an equal space above, regardless the eventual linebreaks in the comments, and make the relative positioning unnecessary.

E.g:

.comment {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 7pt;
    line-height: 1;
    /* position: relative; */
    /* top: -6px; */
    display: inline-block;
    vertical-align: top;
}

Please ask again if there is more to do with.

7

Sorry about that. The link is http://www.rcda.org/mass_times.asp?c=10

I tried using a div and setting it to inline-block and was able to adjust the spacing which is great. Now I have another issue. Sometimes the comment text is butted up against the time while in other places it’s got a separating space. It seems that single lines are a few pixels (3) away while wrapping lines are touching. Could this be that I told the div to position:relative? I ended up setting top:-2 which is a distance I could live with. I really wanted to use -6 for the word “Lent”, but other comments appeared underneath the time. I also added a margin of 8px to the bottom to push time below the comment down. See Lent on Tuesday at St. Mary’s Church, Ballston spa.

8

I noticed that space difference and already posted a solution for it in my last post above:[quote=“Erik_J, post:6, topic:255682”]
I also suggest that you take advantage of that the inline-block itself sits on a text line and has the capability as inline to take a vertical-align rule.

So try also give the comment spans a vertical-align:top; rule. That will give all comments an equal space above, regardless the eventual linebreaks in the comments, and make the relative positioning unnecessary.
[/quote]

If you look at the posted code you’ll see that I also removed the positioning. If you want more space above, apply e.g. a margin-top:.3em;. The vertical-align:top; rule will still make them evenly spaced below the time text.

9

I did not know that inline-block would allow me to vertically align the test to top. Thanks for the assistance. Now all the comments are equidistant from the time.

2 Likes
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.