I have a list of links bound to a fairly narrow box; narrow enough for some links to wrap.
line-height is set to 30px, which is fine for the non-wrapped links; however, for a link whose text is long enough to force a line wrap, a 30px line-height is applied there as well, thus making it appear as if there are 2 links and not just a continuation of link text.
I'd like somehow (without js or on middleware end calc'ing string length) to get the wrapped link text to have a line-height of 10px or so to give visual impression of continuation and not separation.
Line-height
is supposed to set the spacing between lines (particularly, when they wrap). What you're probably looking for is margin
on the li
object. If you set the line-height
to the smaller value that you want when the lines wrap and set the margin
to the value that you want in between the items, you should be good to go.
See if this does what you want:
li {
padding: 10px 0 0 0;
margin: 30px 0;
line-height: 10px;
}