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?

回答1:

Use white-space: nowrap;¹, or give that link more space by setting li's width to greater values.

回答2:

You could add this little snippet of code to add a nice "…" to the ending of the line if the content is to large to fit on one line:

li {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}

回答3:

If you want to achieve this selectively (ie: only to that particular link), you can use a non-breaking space instead of a normal space:

<li>submit&nbsp;resume</li>

https://en.wikipedia.org/wiki/Non-breaking_space#Encodings

edit: I understand that this is HTML, not CSS as requested by the OP, but some may find it helpful…

回答4:

display: inline-block; will prevent line breaks in list items

http://jsfiddle.net/Nash171/mwe4s0nc/46/

 li{
    display: inline-block;
 }

回答5:

Bootstrap 4 has a class named text-nowrap. It is just what you need.

来源：https://stackoverflow.com/questions/1383143/how-to-prevent-line-breaks-in-list-items-using-css