网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.用CSS实现的固定表头的HTML表格.
.CSS+DIV表格背景透明,内容不透明.
.符合web标准的css网站相当于已经.
.利用相对定位及偏移量做精美输入.
.网页风格化 用CSS实现皮肤适时切.
.引入CSS样式的五种方式.
.解决浏览器的等宽空格CSS问题方法.
.精通 CSS 滤镜(三).
.学习CSS制作网页总结的一些经验.
.CSS布局之浮动(二).
.使用 CSS 创建固定宽度的布局.
.css技巧之PDF、ZIP、DOC链接的标.
.css彩色虚线表格及JS鼠标指向单元.
.精通 CSS 滤镜(一).
.凶手loose.dtd导致CSS样式表失效.
.CSS解决图片下面有空隙的简单方法.
.纯CSS制作的新闻网站中的文章列表.
.第四章 颜色背景的CSS.
.提高CSS的网页渲染效率.
.控制网页文件大小通过精简CSS实现.

利用CSS让容器的溢出部分内容隐藏起来,smarty就可以不用截取字符串了

发表日期:2008-8-14


    在网页设计中,会遇到文本超过固定长度导致整体的网页变形的情况。程序员往往需要截取固定的长度来实现某些固定长度的控制。介绍一种直接采用CSS的代码控制来实现文本截取的方法。与程序员的直接字符截取的方式有点区别,其优势是可以自动控制文本显示的长度;缺点是不同浏览器的兼容性并不完美。使用到 overflow,text-overflow,white-space 这三个主要的属性,其他的代码属于修饰作用。

    CSS代码:
    <style>
    .texthidden{
     width:200px;
     overflow:hidden;
     text-overflow:ellipsis;
     white-space:nowrap;
     border:1px solid #ddd;}
    </style>

    HTML代码:
    <div class="texthidden">
    CSS让容器的溢出部分内容隐藏起来
    </div>

代码分析:
1. width:200px; //指定宽度:
2. overflow:hidden;  //将超出内容隐藏
3. text-overflow:ellipsis; //IE专用属性,文本溢出时显示省略标记();其他浏览器不支持。
4. white-space:nowrap; //强制内容不换行。强制在同一行内显示所有文本,直到文本结束或者遭遇 br 元素

    目前使用这种方法比较成功的示例是Gmail的内容显示,在IE下达到最好的效果。如果是FF那就比较糟糕,总是会出现截取半个中文的效果。其中涉及到最主要的原因是 text-overflow 这个属性只在IE下有效,目前很多CSS属性也存在这个问题,特别重要的是Margin和Padding这两个属性,往往导致页面出现各种不同的效果;在页面设计的时候,需要注意这些属性在不同浏览器的显示效果。

上一篇:CSS讨论:IE下中英文字体下划线对齐问题 人气:1004
下一篇:根本不存在DIV+CSS布局这回事 人气:1118
浏览全部CSS的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐