网页文章的标题太长的时候,会影响网页的美观,所以我们要对它进行修剪,限制它只显示多少个文字,多出来的部分用省略号代替。那么如何和在DEDE实现这个效果呢?下面列出3种方法给大家参考:

1、修改CSS的:

white-space: nowrap; text-overflow: ellipsis; overflow: hidden; -o-text-overflow: ellipsis;

    例如：

<a style="width:120px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; -o-text-overflow: ellipsis;" href=”xxxxx”>网页文章很长很长很长很长的标题</a>

    解释: width:120px; 限定长度 text-overflow:ellipsis; 当对象内文本溢出时显示省略标记…,

    white-space:nowrap:强制文本在一行内显示,overflow:hidden:溢出内容为隐藏。

    [c-sharp] view plaincopy

    修改CSS的方法简单,不过很遗憾,text-overflow:ellipsis属性在firefox中是没有效果的。

2、修改模板的方法:

[field:title function='( strlen("@me")>30 ? cn_substr("@me",30)."…" : "@me" )' /]

    用 [field:title function='( strlen("@me")>30 ? cn_substr("@me",30)."…" : "@me" )' /]代替了原来的 [field:title /] ,在输出标题时多了一个判断的过程,先判断标题是否大于30字节,如果大于则只输出30字节的长度,并加上省略号。而title=” [field:title /]” 则不受影响,鼠标移上去时显示标题的全部内容。

    个人比较喜欢这个方法,只需要修改模版,对系统影响很小。

3、代码修改方法:

{dede:arclist  row='4'  titlelen='36'  typeid='8'  infolen='88'}
<p><a href="[field:arcurl/]" ><img src="[field:litpic/]" onerror="this.src='/include/noPic.jpg'" /></a></p>
<p><a href="[field:arcurl/]">[field:title/]</a></p>  //标题只显示36个字符
<p>[field:info/]...</p>  //描述介绍只显示88个字符
{/dede:arclist}

[field:description function='cn_substr(@me,58)'/]  //描述介绍只显示58个字符