Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to prevent line breaks in list items using CSS

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?

like image 806
Rajasekar Avatar asked Sep 05 '09 11:09

Rajasekar


People also ask

How do you prevent a line break in 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.

How do you stop a line from breaking text in CSS?

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).

How do you stop a line break in HTML?

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.


1 Answers

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

like image 197
n1313 Avatar answered Sep 20 '22 10:09

n1313