您好!欢迎光临极易先锋网站!
为梦想者创造梦想品牌
用心服务 追求客户满意 为客户创造价值
客户咨询服务热线
客户咨询服务热线:
13873333976
常见问题
您的位置: 首页 > 新闻中心 > 常见问题 > dedecms标题过长显示不完整,实现截断标题加省略

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

作者:7ecms    发布时间:2020-12-24 05:08     浏览次数 :


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的宽度大才行。所以只管把这个值往大的设吧,反正再大也都会截断的。相反,太短太细,就没有效果。

[返回]