中文标题慎用white-space:nowrap

white-space:nowrap的意思是除非碰到<br>否者强制不换行。在现实使用当中,一般使用white-space:nowrap都配合使用了width(元素宽度)、overflow:hidden(溢出隐藏),来避免因为强制不换行造成的文字撑破元素。今天无意在CSDN上转悠,突然发现了一处错误。

white-space-nowrap

上图的li a 主要代码为:

1
2
3
4
li a {
    width:130px;
    white-space:nowrap;
    overflow:hidden;}

看上图,很明显由于溢出隐藏造成文字被切掉一半,这样严重影响了整体的美观度。

下面是我常用的解决方法:

1
2
3
4
5
li {
    width:130px;
    height:20px;
    line-height:20px;
    overflow:hidden;}

利用元素高度以及行高,自动溢出隐藏,这样隐藏的结果就不会存在切掉半个字或是半个单词的情况。超出的部分会因为行高的设置自定跳到第二行,因为我已经设置元素高度为20像素,超出部分溢出隐藏,这样就完美了解决了文字的裁切问题。

当然有时,可能碰到文本并不是垂直居中对其的,这种情况,我建议将元素高度和行高设置为跟字号一样。然后利用margin-top来定位。

CSS多浏览器兼容与IE6下PNG图片透明方法

现在主流浏览器大部分还是比较统一的网页排版效果,出现问题的主要集中在IE6、IE7、IE9(HTML5)。

IE6及以下版本:

1
2
3
4
5
<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="css/ie6style.css"  />
    <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script type="text/javascript">DD_belatedPNG.fix('body');</script>
<![endif]-->

(DD_belatedPNG_0.0.8a-min.js用于解决IE6及以下版本的PNG图片透明问题,在DD_belatedPNG.fix函数内添加存在PNG的元素中间使用“,”分隔,例:div#logo或img#logo 。)

IE7和IE8:

1
2
3
4
5
6
<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="css/ie7style.css"  />
<![endif]-->
<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="css/ie8style.css"  />
<![endif]-->

IE9及以上版本:

1
2
3
<!--[if lt IE 9]>
    <script src="js/html5.js"  type="text/javascript"></script>
<![endif]-->

(添加HTML5兼容性JS)

备注:css文件内书写不兼容部分的样式表即可,以上所需的PNG透明JS和HTML5兼容JS文件在搜索引擎内直接搜索文件名均可找到。