Search code examples
overridingword-wrapcss

CSS override line-height on word wrap


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.


Solution

  • 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;
    }