标签 css 下的文章

如何用CSS将超出显示宽度的内容隐藏起来

  • 时间:
  • 分类: CSS
  • 评论

在显示列表的时候，太长的标题默认会换行显示，而这样的显示方式往往会破坏我们原有的页面布局，如何在我们无法知道标题长度的情况下，将超出显示宽度的内容隐藏起来？一个常见的做法是用服务器端语言判断、截取，但是这样在以后需要显示更长的标题时就需要修改服务器端脚本。
这里介绍的是如何用CSS将超出显示宽度的内容隐藏起来，在 IE 下我们还可以添加一个省略号，来表示多余的字符已经截断，以后改版也更方便。

<style type="text/css"> 
.textOverFlow { 
    width:300px; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space:nowrap; 
    border:1px solid #ddd; 
} 
</style>

实现原理：
（1）指定宽度：width:300px;
（2）overflow:hidden; 将超出内容隐藏
（3）text-overflow:ellipsis; IE 专有属性，当对象内文本溢出时显示省略标记(…)
（4）white-space:nowrap; 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。

IE6 IE7 Firefox Opera Safari 的 CSS Hacks

  • 时间:
  • 分类: CSS
  • 评论

IE系列

div { +property:value; } 在属性名前加上加号”+”,这个Hack只有IE系列可以识别.
div { *property:value; } 在属性名前加上星号”*”,这个Hack只有IE系列可以识别.
div { _property:value; } 在属性名前加上下划线”_”,这个Hack只有IE6 识别.
background-color:red\0; /* ie 8/9*/
background-color:blue\9\0; /* ie 9*/

IE的if条件Hack

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
<!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
<!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

- 阅读剩余部分 -

CSS实现pre标签内容自动换行

  • 时间:
  • 分类: CSS
  • 评论
pre, code { 
display: block; 
overflow: auto; 
background: #f4f4f4; 
padding: 5px 10px; 
border: 1px solid #eee; 
whitewhite-space:pre-wrap; /* css-3 */    
whitewhite-space:-moz-pre-wrap; /* Mozilla, since 1999 */    
whitewhite-space:-pre-wrap; /* Opera 4-6 */    
whitewhite-space:-o-pre-wrap; /* Opera 7 */    
word-wrap:break-word; /* Internet Explorer 5.5+ */  
white-space: pre-wrap; /* Firefox */ 
}