当前位置:园子博客 » Css » CSS中巧用 nowrap 属性禁止文字自动换行

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

5月 9th, 2009 | Filed under Css | 共有21,712次浏览
设计页面的时候,我们往往需要把内容在一行里面显示,也就是禁止让文字自动换行,首先来看下下面的图片:

没有使用 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; }
  1. 季万强
    12月 6th, 201012:40

    这东西一般还真没有用到过!不过可以备用……CSS太强大啦!

  2. ytqly
    8月 4th, 201023:04

    不错,测试过

  3. 三脚猫
    5月 10th, 200921:06

    又学到新东西了

您必须在 登录 后才能发布评论.