dedecms标题过长显示不完整，实现截断标题加省略

发布时间：2024-07-29 浏览次数：来源：jiyidc.com

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属性知道文本在那里结束，也就生效了。

第六步：

修改调用的文档列表的长度，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的宽度大才行。所以只管把这个值往大的设吧，反正再大也都会截断的。相反，太短太细，就没有效果。

常见问题