设置 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 对象。
赞(0)
关注我们
未经允许不得转载:老王博客 » 设置 ul 中 li 标签文字内容在一行显示的 css 写法

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址