Menu
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.
692
If your document has too much space between the lines, make it look the way you want. Select the paragraph you want to change, or press Ctrl+A to select all text. Go to Home > Line and Paragraph Spacing. Select the line spacing you want.
You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property. For example, you can use it to prevent text extending out the box and breaking the layout. This commonly happens when you have a long URL in the sidebar or comment list.
The <wbr> element If you know where you want a long string to break, then it is also possible to insert the HTML <wbr> element. This can be useful in cases such as displaying a long URL on a page.
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
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; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
