CSS中巧用 nowrap 属性禁止文字自动换行

设计页面的时候,我们往往需要把内容在一行里面显示,也就是禁止让文字自动换行,首先来看下下面的图片:

没有使用 nowrap 属性时文字自动换行效果

我们可以看到在没有定义 white-space: nowrap; 属性的时候,链接文字会自动换行,而这些效果并不是我们想要的。以上的例子是在做友情链接的时候采用了 li 左浮动所出现的问题(因为每个链接的字数无法确定,所以无法定义 li 的固定宽度)。解决方法也很简单,只要在 li 属性里面加上 white-space: nowrap; 声明就可以了。

语法:

white-space : normal | pre | nowrap

参数:

normal : 默认处理方式

pre : 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。

nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。

说明:

通过设置 white-space属性可以改变对象内空格的处理方式。

应用示例:

p { white-space: nowrap; }

CSS中巧用 nowrap 属性禁止文字自动换行》上有3条评论

发表评论