您现在的位置: 第一万维网 >> 网页设计 >> web标准 >> 正文

禁止文字自动换行{white-space: nowrap;}

作者: 佚名 文章来源:本站原创 更新时间:2008/6/26 17:28:38

white-space: nowrap

当中文文字很长的时候(中间没有空格也没有换行符号),不管是IE还是firefox,到达边界都会自动换行。
但是有的情况,我们并不希望这样。比如:当在几个li并排排列,不想让每行的最后的一个li的文字自动换行,那就可以用本属性了。

使用这个css属性之后,文本只有在遇到空格或者是换行符的时候才能 换行

比如:

div{white-space: nowrap;}

运行代码无着色模式复制打印?
<style type="text/css">  
div{width:300px;border:1px solid red;margin:10px;overflow:hidden;}  
    .nowrap{white-space: nowrap;}  
</style>  
<div class="nowrap">  
这是一段很长的文字中间没有空格也没有换行它不会自动换行直到被截取掉<br />胡锦涛抵达日本开始访问日本方面最高规格迎接 更多<br />  
</div>  
<div>这是一段很长的文字中间没有空格也没有换行但它会自动换行<br />胡锦涛抵达日本开始访问日本方面最高规格迎接 更多<br /></div>  
<p>上面两个div里超宽的文字,第一个里面的被禁止换行,然后超宽的被截取了;第二个不做设置,于是自动换行了</p>  
<a href="?">Web标准化 <a href="http://www.div-css.com">www.div-css.com</a></a>  
<style type="text/css">
div{width:300px;border:1px solid red;margin:10px;overflow:hidden;}
 .nowrap{white-space: nowrap;}
</style>
<div class="nowrap">
这是一段很长的文字中间没有空格也没有换行它不会自动换行直到被截取掉<br />胡锦涛抵达日本开始访问日本方面最高规格迎接 更多<br />
</div>
<div>这是一段很长的文字中间没有空格也没有换行但它会自动换行<br />胡锦涛抵达日本开始访问日本方面最高规格迎接 更多<br /></div>
<p>上面两个div里超宽的文字,第一个里面的被禁止换行,然后超宽的被截取了;第二个不做设置,于是自动换行了</p>
<a href="?">Web标准化 <a href="http://www.div-css.com">www.div-css.com</a></a>
 

Tags:文字自动换行,white-space nowrap
公司简介 | 公司新闻 | 联系我们 | 有问必答 | 网站地图 | 网站备案
Copyright © 2001-2021 www.01www.com Inc. All rights reserved. 中国信息港旗下网站
《中华人民共和国增值电信业务经营许可证》编号:京B2-20070158(ISP) 京ICP证050145号(ICP)
地址:河南省郑州市经三路鑫苑金融广场金座2006室
第一万维网---中国老牌优秀虚拟主机服务提供商!