`

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

阅读更多

亲测,可用: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这两个属性,往往导致页面出现各种不同的效果;在页面设计的时候,需要注意这些属性在不同浏览器的显示效果。

分享到:
评论
2 楼 08tankuai 2011-12-25  
试了一下!还不错,谢谢。
1 楼 iwlk 2011-12-06  
已测试,很好用, 新版的火狐,也支持 

相关推荐

    smarty 中文字符串截取示例

    //如果有中文则减去中文的个数 function smarty_modifier_truncate($string, $sublen = 80, $etc = '...', $break_words = false, $middle = false)

    解析smarty 截取字符串函数 truncate的用法介绍

    在Smarty中,提供了一系列内置的函数,其中`truncate`函数用于对字符串进行截取,以满足在有限空间内显示部分文本的需求。 `truncate`函数的基本用法如下: ```php {$variable|truncate[:length][:append][:break]...

    smarty中英文多编码字符截取乱码问题解决方法

    然而,在处理不同语言的多编码字符串时, Smarty的字符串截取功能smartTruncate可能会导致乱码问题,特别是在中英文混合的文本中。这是因为中文字符和英文字符在编码中的长度不同,一个中文字符通常相当于两个英文...

    smarty模板中拼接字符串的方法

    在Smarty模板中拼接字符串是开发过程中经常需要使用的功能,拼接字符串在Smarty中可以通过使用内置的过滤器或者函数来实现。 在Smarty模板中拼接字符串主要有几种方法: 1. 使用内置过滤器“cat”进行字符串拼接:...

    smarty truncate中文乱码解决

    在使用Smarty时,有时我们可能会遇到“truncate”修饰符处理中文字符串时出现乱码的问题。这通常是由于字符编码不一致或者处理方式不当导致的。下面我们将深入探讨这个问题,并提供解决方案。 在PHP中,`truncate`...

    smarty_用于截取中文不会破字的变量调节器

    然而,在处理中文字符时,Smarty的内置字符串截取功能可能会出现“破字”现象,即截取的中文字符串中部分字符被分割,导致显示不完整。为了解决这个问题,我们可以使用一个名为“modifier[1].cutstr”的自定义变量...

    php smarty截取中文字符乱码问题?gb2312/utf-8

    这是因为Smarty中的truncate修饰符主要用于英文字符截取,在处理中文字符时,由于一个中文字符通常占用的字节比英文字符多,所以直接截取会导致显示上出现乱码,比如中英文混合字符串时,截取同样数量的字符,中文...

    smarty基础之拼接字符串的详解

    在PHP的模板引擎Smarty中,字符串拼接是一个常见的操作,特别是在构建动态HTML内容时。本文将深入探讨如何在Smarty中有效地拼接字符串。 首先,Smarty提供了两种主要的方式来完成字符串拼接:`{assign}`标签和过滤...

    Smarty最新版下载自Smarty官网

    Smarty是一款广泛应用于PHP开发中的模板引擎,它的设计...这样,就可以利用Smarty的强大功能,构建出高效、易维护的Web应用。对于初学者,Smarty的官方网站提供了详细的教程和API文档,是学习和使用Smarty的重要资源。

    php,css,tp,jquery,smarty手册

    通过CSS,可以定义文本颜色、字体、布局、边距、背景等样式,实现网页的美化和布局控制。CSS支持层叠规则,使得多个样式表可以同时作用于一个元素,优先级高的样式会覆盖低优先级的样式。CSS3引入了更多新特性,如...

    一个很不错的smarty模块

    2. **缓存机制**:Smarty支持缓存功能,可以将渲染后的页面存储起来,当相同的请求再次到来时,直接返回缓存的内容,提高了页面加载速度。 3. **模板变量**:在Smarty中,可以通过`{$var}`这样的语法来使用变量,...

    Smarty+smarty中文手册

    2. **缓存机制**: Smarty支持缓存功能,可以将处理过的模板结果保存起来,对于不经常变动的内容,可以显著提高页面加载速度。 3. **安全性**: Smarty通过预定义的安全策略和过滤器,确保模板中的数据在输出时不会...

    Thinkphp模板中截取字符串函数简介

    ThinkPHP框架中模板的字符串截取方法主要涉及两种函数:substr和msubstr。在PHP原生中,substr函数被广泛用于截取字符串,它同样适用于ThinkPHP模板中。此外,由于ThinkPHP对中文字符处理的特殊需求,还提供了...

    smarty中文使用手册

    Smarty的模板继承允许创建一个基础模板(layout),子模板可以继承并覆盖基础模板的部分内容,实现页面布局的复用。 5. **缓存机制** Smarty提供了缓存功能,可以提高动态生成页面的性能。你可以设置模板或部分...

    smarty3中文手册

    4. **函数和插件**:Smarty3拥有丰富的内置函数和插件系统,可以扩展其功能,例如处理日期时间、字符串操作、数学计算等。 5. **缓存机制**:Smarty3提供缓存功能,可以将渲染后的模板存储起来,减少不必要的重复...

    Smarty_smarty_

    3. **组合修改器**:Smarty提供了丰富的修改器,如`escape`(转义特殊字符)、`lower`(转换为小写)和`upper`(转换为大写)。例如,`{$text|escape:'htmlall'}`可以防止XSS攻击。 4. **内建函数**:除了修改器,...

    thinkPHP内置字符串截取函数用法详解

    本文实例讲述了thinkPHP内置字符串截取函数用法。分享给大家供大家参考,具体如下: thinkphp内置了一个可以媲美smarty的模板引擎,给我们带来了很大的方便。调用函数也一样,可以和smarty一样调用自己需要的函数,...

    php截取汉字类

    ### PHP截取汉字类知识点详解 #### 一、概述 ...通过这些函数,开发者可以轻松地对中文字符串进行截取处理,适用于不同编码环境下的需求。对于需要处理大量中文数据的应用程序来说,这些工具是非常有价值的。

    smarty最新版3.1.16

    2. **插件系统**:Smarty拥有丰富的内置函数和自定义插件机制,可以扩展各种功能,如日期格式化、字符串操作等,满足不同需求。 3. **缓存机制**:它提供了高效的缓存策略,可以将编译后的模板或数据缓存起来,减少...

    利用smarty模板开发的电子商务软件

    4. **缓存机制**:Smarty支持缓存功能,对于不经常变动的数据,它可以将渲染后的结果存储起来,下次请求时直接返回缓存内容,提高页面加载速度。 5. **安全功能**:Smarty提供了一些安全特性,如自动转义输出内容,...

Global site tag (gtag.js) - Google Analytics