用CSS解决中英文混合字符串的截取省略问题的解决办法

作为一个程序员,经常需要面对的一个问题就是在新闻等信息的标题列表中,常常为了适应表格的宽度,需要对过长的标题文字的进行截取并在截取后的文字末端加上省略号。

  众所周知,有很多方法可以实现这个功能,JavaScript,ASP,PHP都有各自的实现方法,但是面临的问题有很多,比如中英文混杂时或在某些编码下,容易造成截取出现乱码的问题,虽然大多数问题已经有比较成熟的解决方案,但在数据量比较大时,使用JavaScript,ASP,PHP实现这一功能,无疑会给客户端或服务器端造成比较大的资源开销。

  随着W3C的渐渐普及,许多网站都在进行着将传统表格转化为DIV+CSS的布局方式,我在研究CSS与DIV的一些特性时,发现了一个比较有趣的CSS,经过一系列的研究和实验以后,发现了一个使用DIV+CSS实现这一功能的另类方法,此方法在我所能测试均无问题,并且良好的兼容于各种编码及中英文混排的情况。

在Div中的方法:

<DIV STYLE="width: 200px;  border: 1px dashed red; overflow: hidden; text-overflow:ellipsis"> 
<NOBR>就是比如有一行文字,很长,表格内一行显示不下.</NOBR> 
<NOBR>就a是比如有一行文字,很长,表格内一行显示不下.</NOBR> 
<NOBR>就1是比如有一行文字,很长,表格内一行显示不下.</NOBR> 
<NOBR>就F是比如有一行文字,很长,表格内一行显示不下.</NOBR> 
<NOBR>就是 Like You Pig Very Very Very Much.</NOBR> 
</DIV>

在Table中的方法:

<TABLE style="table-layout:fixed;border-collapse:collapse;font-size:12px;" border="1" width="200" bordercolor=#666666>
<TR>
<TD nowrap style="overflow:hidden;text-overflow:ellipsis;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</TD>
</TR>
</TABLE>

  代码很简单,基本上应该很容易就可以看明白,主要在于“text-overflow”这个属性,此属性有2个值,分别是“ellipsis”和“clip”,简单的理解,第一个值会在截取之后在文字末端加上省略号,第二个值则不会。

  这个方法目前我还没有发现任何bug,CSS控制,也不会造成太大的开销,自我感觉,是一个有用的方法!

(0)

相关推荐

  • PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数

    一.中文截取:mb_substr() mb_substr( $str, $start, $length, $encoding ) $str,需要截断的字符串 $start,截断开始处,起始处为0 $length,要截取的字数 $encoding,网页编码,如utf-8,GB2312,GBK 实例: 复制代码 代码如下: <?php $str='我们:http://www.jb51.net'; echo mb_substr($str,0,4,'utf-8');//截取头5个字,假定此代码所在php

  • php,js,css字符串截取的办法集锦

    可能没什么含量,求少拍砖. 首先是PHP版本的. 复制代码 代码如下: <?php echo mb_strimwidth("这里是内容", 0,3,"...","utf-8"); ?> 其实只用mb_strimwidth一个函数就可以了,该函数的说明如下: mb_strimwidth - 获取按指定宽度截断的字符串 string mb_strimwidth ( string $str , int $start , int $width

  • php从右向左/从左向右截取字符串的实现方法

    语法: substr(要截取的字符串, 开始位置 ,截取长度) 开始位置从0开始,如果想从第一个字符开始截取,则开始位置参数为0. 最后一个参数是可选的,如果只提供开始位置,则从开始位置截取到最后 先看从左向右截取的例子: 1.从第2个字符截取到最后 复制代码 代码如下: $result = substr ("abcdef", 1); echo($result); 输出结果为:bcdef 2.从第2个字符开始截取3个 复制代码 代码如下: $result = substr ("

  • js 日期字符串截取分割成单个具体的日期(2009-12-30 13:28:29)

    var time='2009-12-30 13:28:29'; alert(time); var year=time.substr(0,4); alert(year); var index1=time.indexOf("-"); var index2=time.lastIndexOf("-"); var cha=parseInt(index2)-(parseInt(index1)+1); var month=time.substr((parseInt(index1)

  • php字符串截取的简单方法

    复制代码 代码如下: strpos(string,find,start) 实例: 复制代码 代码如下: <?php  echo strpos("Hello world!","wo");  ?> 输出6 复制代码 代码如下: substr(string,start,length) 其中start的参数 正数 - 在字符串的指定位置开始负数 - 在从字符串结尾的指定位置开始0 - 在字符串中的第一个字符处开始 复制代码 代码如下: <?php  ech

  • JS 截取字符串substr 和 substring方法的区别

    substr 方法 返回一个从指定位置开始的指定长度的子字符串. stringvar.substr(start [, length ]) 参数 stringvar 必选项.要提取子字符串的字符串文字或 String 对象. start 必选项.所需的子字符串的起始位置.字符串中的第一个字符的索引为 0. length 可选项.在返回的子字符串中应包括的字符个数. 说明 如果 length 为 0 或负数,将返回一个空字符串.如果没有指定该参数,则子字符串将延续到 stringvar 的最后. 示

  • php截取中文字符串不乱码的方法

    GBK编码截取示例 复制代码 代码如下: $str = '我是谁';  //gbk编码的字符串echo mb_substr($str, 0, 1, 'gbk'); //输出 我 mb_substr方法比substr多一个参数,用来指定字符串编码. utf-8编码截取示例 [code]$str = '我abc是谁';  //utf-8编码的字符串echo mb_substr($str, 0, 2, 'utf-8'); //输出 我a[/code 中英混合也完全没有问题. 友情提示 使用的时候要注意

  • php字符串截取问题

    但是在英文和汉字混合的情况下会出现如下问题: 如果有这样一个字符串 $str="这是一个字符串"; 为了截取该串的前10个字符,使用 if(strlen($str)>10) $str=substr($str,10)."-"; 那么,echo $str的输出应该是"这是一个字-" 假设 $str="这是1个字符串": 这个串中包含了一个半角字符,同样执行: if(strlen($str)>10) $str=subst

  • JS截取字符串常用方法详细整理

    使用 substring()或者slice() 函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组 例子: str="jpg|bmp|gif|ico|png"; arr=theString.split("|"); //arr是一个包含字符值"jpg"."bmp"."gif"."ico"和"png"的数组 函数:Join() 功能:使用您选择的分

  • 用CSS解决中英文混合字符串的截取省略问题的解决办法

    作为一个程序员,经常需要面对的一个问题就是在新闻等信息的标题列表中,常常为了适应表格的宽度,需要对过长的标题文字的进行截取并在截取后的文字末端加上省略号. 众所周知,有很多方法可以实现这个功能,JavaScript,ASP,PHP都有各自的实现方法,但是面临的问题有很多,比如中英文混杂时或在某些编码下,容易造成截取出现乱码的问题,虽然大多数问题已经有比较成熟的解决方案,但在数据量比较大时,使用JavaScript,ASP,PHP实现这一功能,无疑会给客户端或服务器端造成比较大的资源开销. 随着W

  • PHP针对中英文混合字符串长度判断及截取方法示例

    本文实例讲述了PHP针对中英文混合字符串长度判断及截取方法.分享给大家供大家参考,具体如下: /** * * 中英混合字符串长度判断 * @param unknown_type $str * @param unknown_type $charset */ function strLength($str, $charset = 'utf-8') { if ($charset == 'utf-8') $str = iconv ( 'utf-8', 'gb2312', $str ); $num = s

  • C#实现中英文混合字符串截取的方法

    本文实例讲述了C#实现中英文混合字符串截取的方法,是C#字符串操作中非常常用的一个方法.分享给大家供大家参考之用.具体方法如下: 具体功能代码如下: /// <summary> /// 截取中英文混合字符串 /// </summary> /// <param name="text">字符文本</param> /// <param name="length">截取长度</param> /// &l

  • php 截取中英文混合字符串的方法

    php 截取中应为字符串,就不必再用substr或者mb_substr //截取想这样的字符串 a李三 利用ASCII /** * * 中英混合的字符串截取 * @param unknown_type $sourcestr * @param unknown_type $cutlength */ function assoc_substr($sourcestr, $cutlength) { $returnstr = ''; $i = 0; $n = 0; $str_length = strlen

  • 在javascript中如何得到中英文混合字符串的长度

    有同事在公司的OA上发了个贴子,介绍在javascript中如何得到中英文混合字符串的长度. 用的是正则表达式. 复制代码 代码如下: var str = "坦克是tank的音译"; var len = str.match(/[^ -~]/g) == null ? str.length : str.length + str.match(/[^ -~]/g).length ; 我查了一下书,有点明白了: 西文常用字符集由空格" "(0x20)到"~"

  • JavaScript获取中英文混合字符串长度的方法示例

    本文实例讲述了JavaScript获取中英文混合字符串长度的方法.分享给大家供大家参考,具体如下: JavaScript获取中英文混合字符串的长度方法: function StrLen(sString) { var j = 0; var s = sString; if (s=="") return j; for (var i=0; i<s.length; i++) { if (s.substr(i,1).charCodeAt(0)>255) j = j + 2; else

  • C#中英文混合字符串截取函数

    代码一 /// <summary> /// 截断字符串 /// </summary> /// <param name="maxLength">最大长度</param> /// <param name="str">原字符串</param> /// <returns></returns> public static string CutStr(int maxLength, s

  • Java截取中英文混合字符串的方法

    题目: 编写一个截取字符串的函数,输入为一个字符串和字节数,输出为按字节截取的字符串. 但是要保证汉字不被截半个,如"我ABC"4,应该截为"我AB",输入"我ABC汉DEF",6,应该输出为"我ABC"而不是"我ABC+汉的半个". GB2312.GBK.GB18030,CP936以及CNS11643都满足条件 -- 中文是占用2个字节的,英文是占用1一个字节 . 因为中文转换为byte字节,随着编码的不

  • iOS中如何判断中英文混合的字符长度

    废话不多说,直接给大家贴代码了. 一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. //第一种方法 NSLog(@"--first-%i",[self convertToInt:@"123我爱你"]); //第二种方法 NSLog(@"--second--%ld",[self getToInt:@&

  • javascript截取字符串(通过substring实现并支持中英文混合)

    javascript截取字符串(支持中英文混合) 复制代码 代码如下: <script type="text/javascript"> var sub=function(str,n){ var r=/[^\x00-\xff]/g; if(str.replace(r,"mm").length<=n){return str;} var m=Math.floor(n/2); for(var i=m;i<str.length;i++){ if(str

随机推荐