亲测,可用:m2maomao 2011.06.29
在网页设计中,会遇到文本超过固定长度导致整体的网页变形的情况。程序员往往需要截取固定的长度来实现某些固定长度的控制。介绍一种直接采用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这两个属性,往往导致页面出现各种不同的效果;在页面设计的时候,需要注意这些属性在不同浏览器的显示效果。
分享到:
相关推荐
//如果有中文则减去中文的个数 function smarty_modifier_truncate($string, $sublen = 80, $etc = '...', $break_words = false, $middle = false)
本篇文章是对smarty 截取字符串函数 truncate的用法进行了详细的分析介绍,需要的朋友参考下
主要介绍了smarty模板中拼接字符串的方法,需要的朋友可以参考下
本篇文章是对smarty基础中的拼接字符串进行了详细的分析介绍,需要的朋友参考下
本文实例讲述了thinkPHP内置字符串截取函数用法。分享给大家供大家参考,具体如下: thinkphp内置了一个可以媲美smarty的模板引擎,给我们带来了很大的方便。调用函数也一样,可以和smarty一样调用自己需要的函数,...
主要介绍了smarty中英文多编码字符截取乱码问题解决方法,涉及到对原有smartTruncate的修改,非常具有实用价值,需要的朋友可以参考下
一个不错的smarty模块小程序。初学smarty的朋友可以看看。
smarty中的字符串截取不支持中文,总是破字,这个小插件可以帮你解决这个问题,他可不破字截取中文汉字,内有使用方法,可以像一般的变量调节器一样使用
Smarty Smarty Smarty
php中文开发手册(.chm),smarty中为开发手册(.chm),jquery1.11.0手册(.chm),smatry3.1的程序以及一些jquery的动画插件
除此之外,新支持字符串类型的模板,感觉比较生猛,离模板之路也是渐行渐远: 代码片断: $smarty->display('string:This is my template, {$foo}!'); smarty3的相关链接 Smarty 3 Alpha with SVN-- 选择googlecode...
现在就用30分钟让您快速入门。 一. 安装 首先打开网页http://smarty.PHP.net/download.PHP,下载最新版本的Smarty。解压下载的文件(目录结构还蛮复杂的)。接下来我演示给大家一个安装实例,看过应该会举一反三的...
smarty truncate中文乱码解决
Table of Contents [内容列表] Preface [序] I. Getting Started [开始] 1. What is Smarty? [什么是Smaty?] 2. Installation [安装] Requirements [安装] Basic Installation [基本安装] Extended Setup ...
Smarty 模板引擎教程,内容主要有基本语法、变量、组合修改器、内建函数、自定义函数、配置文件、控制台调试、缓存、插件扩展、使用技巧和经验等,比较详细的一个中文手册
smarty主要内容收集smarty主要内容收集smarty主要内容收集
Table of Contents [内容列表] Preface [序] I. Getting Started [开始] 1. What is Smarty? [什么是Smaty?] 2. Installation [安装] Requirements [安装] Basic Installation [基本安装] Extended Setup ...
Smarty格式化数字 default默认 escape转码 indent缩进 lower小写 nl2br换行符替换成 regex_replace正则替换 replace替换 spacify spacify是在字符串的每个字符之间插入空格或者其他的字符串. 参数表示将在两个...
smarty3.0,smarty最新版本
更准确的说,它分开了逻辑程序和外在的内容,提供了一种易于管理的方法。可以描述为应用程序员和美工扮演了不同的角色,因为在大多数情况下 ,他们不可能是同一个人。例如,你正在创建一个用于浏览新闻的网页,新闻标题,...