I'm trying to put a link called Submit resume in a menu using a li
tag. Because of the whitespace between the two words it wraps to two lines. How to prevent this wrapping with CSS?
The white-space property has numerous options, all of which define how to treat white space inside a given element. Here, you have set white-space to nowrap , which will prevent all line breaks.
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).
There are several ways to prevent line breaks in content. Using is one way, and works fine between words, but using it between an empty element and some text does not have a well-defined effect. The same would apply to the more logical and more accessible approach where you use an image for an icon.
Use white-space: nowrap;
[1] [2] or give that link more space by setting li
's width to greater values.
[1]§ 3. White Space and Wrapping: the white-space property - W3 CSS Text Module Level 3
[2]white-space - CSS: Cascading Style Sheets | MDN
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