最新更新 sitemap 网站制作设计本站搜索
网页设计
国外网站 韩国网站 个人主页 手提袋设计 CSS 网页特效 平面设计 网站设计 Flash CMS技巧 服装网站 php教程 photoshop 画册 服务器选用 数据库 Office
虚拟主机 域名注册 云主机 网页设计 客服QQ:8208442

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

日期:10-17    来源:中国设计秀    作者:cnwebshow.com

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

没有使用 nowrap 属性时文字自动换行效果bTm中国设计秀
 bTm中国设计秀

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

语法:bTm中国设计秀

white-space : normal | pre | nowrapbTm中国设计秀

参数:bTm中国设计秀

normal : 默认处理方式bTm中国设计秀

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

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

说明:bTm中国设计秀

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

应用示例:bTm中国设计秀

p { white-space: nowrap; }