用overflow代替left截取指定长度字符串

为了防止文章标题过长超过容器(td,div)宽度而显示成多行,我们通常要对标题进行处理让其显示在一行,通常使用的方法有两种:一种方法是在客户端用CSS设置容器的overflow属性;另一种方法则是在服务器端用left函数对标题字符串进行截取。两种方法通常情况下都能达到我们的目的:

<style type="text/css">
div{
width:200px;
overflow:hidden;
}
</style>
<div>轻轻松松在页面中插入单选按钮/复选框</div>
<div><% =Left("轻轻松松在页面中插入单选按钮/复选框",11) %></font></div>

今天我们来比较一下它们的优缺点:

1.处理地点不同

一个位于客户端,一个位于服务器端。能在客户端的处理的尽量不要在服务器端处理,减轻服务器负担,这一原则大家都知道了。

2.处理对象的不同

CSS是对容器属性进行设置,left是对标题字符串进行处理,哪个更合理?回答这一问题前我们先问下:为什么要对标题长度进行处理?为的就是"让标题长度不超过容器长度"即可!CSS是对容器属性进行设置,当标题长度超出容器长度时就进行处理;而left的做法是对每个标题进行处理,将标题的长度都控制在我们测试得出的长度n范围内[left(title,n)],有一刀切的嫌疑。可见前者更具合理性。

3.对html处理的简易性

这一点是最能说服我用CSS的理由。有时由于某些原因,我们会在一些标题中加入了html代码,如:<font color="#FF0000">轻轻松松在页面中插入单选按钮/复选框</font>,我们想要的结果应当是让标题不显示为两行,但还要保证仍为红色!这点left做不到,要达到效果我们先得把html去除,然后对余下的字符串进行截取,再添加html,非常的麻烦;而css完全不理会html,真正做到"只对字符串进行处理",非常方便,如:

<style type="text/css">
div{
width:200px;
overflow:hidden;
}
</style>
<div><font color="#FF0000">轻轻松松在页面中插入单选按钮/复选框</font></div>
<div><% =Left("<font color=""#FF0000"">轻轻松松在页面中插入单选按钮/复选框</font>",11) %></font></div>

采用left不仅达不到效果,有时还会导致页面显示出错!相比之下,用哪一个大家心里有数。
 

时间: 2025-01-01 04:12:30

用overflow代替left截取指定长度字符串的相关文章

jQuery截取指定长度字符串的实现原理及代码_jquery

截取指定长度字符串操作在网站建设中大量使用,尤其是在新闻列表这种类型的操作中大量应用. 下面就是一个截取字符串代码实例: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="htt

jQuery截取指定长度字符串代码_jquery

例子,截取字符串代码. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery截取字符串操作---www.jb51.net</title> <script type="text/javascript"

JavaScript截取指定长度字符串点击可以展开全部代码_javascript技巧

文章的篇幅往往不是那么恰到好处,如果以原有的篇幅展示,那么有可能会影响网页的布局或者美观度,这个时候就要根据情况适量截取一定的字符串,以适应布局,不过当点击一个按钮的时候依然可以展开全部的内容,下面就通过一个实例详细介绍一下如何实现此效果,代码示例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" conten

前后台实现精确截取指定长度字符串(考虑全角半角)

页面上很多显示新闻列表时,考虑面子问题,常常需要限制标题长度. 以前都是用 <%#Eval("title").ToString().Length > 10 ? Eval("title").ToString ().Substring(0, 8) + "..." : Eval("title").ToString()%> 这样的方式实现,这样代码即繁多又不能重用,不过这个还不是问题,因为可以在后台写个传字符串 和指

解决方案-截取指定长度的富文本内容可能会出现页面被凌乱的问题

问题描述 截取指定长度的富文本内容可能会出现页面被凌乱的问题 5C freemaker页面中截取指定长度的字符串,超出长度的部分用-替代 <#if topic.title?length lt 35> ${topic.title}<#else> ${topic.title?substring(035)}... </#if> 如果数据库中topic.title的内容不是纯文本,而是富文本(含有很多html标签的文本)内容,按指定 长度截取的话,就有可能会破坏富文本的html

js substring从右边获取指定长度字符串

 本篇文章主要是对js substring从右边获取指定长度字符串的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 如下所示: 代码如下:  /*       Get the rightmost substring, of the specified length,       from a String object.    */     String.prototype.right = function (length_)     {             var _fr

截取指定长度的文字(包含对汉字的处理)

一般来说,要截取的变量来自Mysql,首先要保证那个字段长度要足够长,一般为char(200),可以保持100个汉字,包括标点. 本程序实现的功能:截取指定长度汉字而不会出现以"?>"结尾,超出部分以"..."代替 <?PHP $str="这个字符比较长SO LONG"; $Short_Str=showShort($str,4);//截取前面4个汉字,结果为:这个字符... Echo "$Short_Str"; F

安全的截取指定长度的html或者ubb字符串

在将html代码输出到页面时,有时候会需要截断字符串保留指定长度的字符串,由于html中有些标签 必须成对出现,所以在截取html时需要特别注意,不能因为截断问题把页面搞乱掉. 在截取字符串时需要记录每一个标签是否关闭,如果截取到指定长度还有没有关闭的标签,那么我们 需要将标签关闭,或者删除掉未关闭的标签.不考虑某些不需要关闭标签的情况,html开始和结束标签总 是成对出现的,我们可以遍历输入的字符串,并在标签开始时放入堆栈中,遇到结束标签时从堆栈中弹出 一个元素,这样遍历到指定长度,堆栈中留下

用C#截取指定长度的中英文混合字符串

字符串 我们常做的一件事情,就是在文章系统中,截取一定长度的文章标题,超过指定长度,就加"..." 如两个字符串:string str1 = "中国人要啊abc呀~";string str2 = "1中国人23456abc呀~"; 要截取后,输出: str1 = "中国人要...";str2 = "1中国人2..."; 即要把中英文混合的字符串,在截取后,长度要一致,即8个字节的长度(不包括三个点),而且不