解决dedecms标题过长显示不完整,实现截断标题加省略号的方法

Posted by

这个问题由来已久,但是百度里搜了一下,发现老的方法有一定的错误。主要是随着浏览器的不断更新,各个浏览器对CSS的支持越来越好,原来不能实现的方法,现在可以实现了。

本文解决dedecms标题过长导致排版混乱,并且实现截断标题、标题阶段后末尾加省略号的方法,正是基于CSS的。

下面是详细的流程:

第一步:

进入dedecms的后台–—系统——系统设置——系统基本参数–—其他选项——文档标题最大长度。默认是60,改为你要的长度(我这里改为了250,不要问我为什么。)

第二步:

登陆phpmyadmin,寻找网站数据库,改数据库表dede_archives表里面的title字段,原默认是60,(这里同样改为250)。

特别备注:UTF-8编码中,1个汉字占用的是3个字节;GBK编码中,1个汉字占用的是2个字节。我们在dedecms里调用文章列表的时候,会发现titlelen如果设置为30,那么最多只显示11个汉字。

第三步:

进入dedecms后台,在“模板管理”中的“标签源码管理”,找到arclist.lib.php。点击“编辑”,搜索“$titlelen = AttDef($titlelen,30)”这条语句。把里面的30,改为60或者你想要的数值。

第四步:

修改网站的CSS样式表,修改a标签的全局样式;

a{ text-decoration:none; text-overflow:ellipsis; white-space: nowrap; overflow: hidden;}

overflow:hidden;   overflow 属性规定当内容溢出元素框时发生的事情。hidden值规定,内容会被修剪并且其余内容是不可见的。

text-overflow:ellipsis;  text-overflow 属性规定当文本溢出包含元素时发生的事情。ellipsis值规定,显示省略符号来代表被修剪的文本。老版本的firefox不支持这一属性,目前来说所有主流的浏览器,包括最新版的firefox都支持这一属性啦。

white-space: nowrap;  white-space 属性设置如何处理元素内的空白。值nowrap规定,文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。正是因为有了这个样式,文本才会溢出元素,才会触发text-overflow和overflow属性。才导致文本内容被截断,以及显示省略号。

这样,仅仅通过a标签的全局样式的修改,我们就实现了自己想要的效果。

第五步:

文章列表样式的修改,必须给列表增加{display:block;}样式,并且为li元素设置宽度;

display:block;  display属性规定元素应该生成的框的类型。值block规定,元素将显示为块级元素,此元素前后会带有换行符。

上文提到white-space:nowrap,会导致文本占用一整行,直到遇到<br>标签为止。如果不加display:block,会导致文本无法结束。text-overflow和overflow根本就不知道文本时在那里结束的,也就必然无法生效了。

给li元素加上display:block,会自动给li元素结尾加上<br>。white-space: nowrap,遇到<br>会在这里停止。text-overflow和overflow属性知道文本在那里结束,也就生效了。

在这里,不得不佩服CSS开发者们,真的是巧夺天工的设计思路啊。这样来写CSS,真的感觉自己是个艺术家哈。O(∩_∩)O哈哈~,不小心又自恋了一把。

第六步:

修改调用的文档列表的长度,titlelen其实就是title的length的缩写,翻译成中文就是标题的长度。

<ul>
{dede:arclist titlelen=’60’ row=’8′ typeid=”37″}
<li><a href=”[field:arcurl/]”>[field:title/]</a></li>
{/dede:arclist}
</ul>

样式设置好以后,你的titlelen只管往大的设置。但是记得a的宽度,千万不能少于li的宽度,只能比li的宽度大才行。所以只管把这个值往大的设吧,反正再大也都会截断的。相反,太短太细,就没有效果了。

Leave a Reply

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据