设置 ul 中 li 标签文字内容在一行显示的 css 写法

老王其实不是很懂 css 语法，今天遇到了一个 WordPress 的菜单内容太长被强制换行的问题，看了下 html 结构，就是 ul 里套了多个 li 标签，网上搜了下加了一个 css 样式就搞定了，本文分享下防止 li 标签内容太长自动换行的 css 写法。

一、li 不换行

先放写法：

white-space: nowrap;

没错，一行代码就搞定了，功能就是当 li 内容太长而被强制换行时，这个 css 样式可以保证 li 不管内容多长都在一行显示。

二、white-space 语法介绍

下面简单介绍下 white-space 这个样式，它可以设置为 3 个值：normal | pre | nowrap。

• normal：默认值。默认处理方式，文本自动处理换行，假如抵达容器边界内容会转到下一行。
• pre：换行和其他空白字符都将受到保护。这个值需要 IE6+ 或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。
• nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。