网页文章的标题太长的时候,会影响网页的美观,所以我们要对它进行修剪,限制它只显示多少个文字,多出来的部分用省略号代替。那么如何和在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个字符
