如果文章标题如果过长的话，Movable Type 默认模板会显示多行。想把它改成超过一行的文字都改成...显示。我想到两种方法来实现截断效果。
第一种是方法使用MT自带的trim_to功能，截取指定长度字符，然后再在后面加上...显示。MT从6.0.4开始，对这个功能做了增强，trim_to既可以从字符串左侧开始截取又可以从字符串的右侧开始截取(参数为负值)。详细使用方法参考下面日文文档里给出的示例，只需对应修改Entry Summary模板第四行H2标记内容：
<$mt:EntryTitle trim_to="5" $> 出力例: いろはにほ <$mt:EntryTitle trim_to="5+..." $> 出力例: いろはにほ... <$mt:EntryTitle trim_to="-3" $> 出力例: もせす <$mt:EntryBody trim_to="5+..."$> <$mt:EntryBody trim_to="-3"$> 出力例: いろはにほ...もせす
我要截断的是文章列表里面的文章标题，使用trim_to的话对搜索引擎似乎不太友好。所以决定使用css截断的方法。实现起来也非常简单。看下面例子：
先写一小段CSS，放到了一个单独的css文件里：
/*截断文章标题*/
.ellipsis-text{
text-overflow: ellipsis;
/* Required for text-overflow to do anything */
white-space: nowrap;
overflow: hidden; }
在要截取内容的地方添加这个类。我修改的是 Entry Summary 模板第四行。
<h2 class="asset-name entry-title"><a href="<$mt:EntryPermalink$>" rel="bookmark"><$mt:EntryTitle$></a></h2>
修改为：
<h2 class="asset-name entry-title ellipsis-text"><a href="<$mt:EntryPermalink$>" rel="bookmark" title="<$mt:EntryTitle$>"><$mt:EntryTitle$></a></h2>
我增加的绿色部分是为了让鼠标悬停在被截断的标题上时，可以显示出完整的标题。效果如下：
我在一些网站上看到还要针对opera 和firefox写单独的代码，但是在我实际测测试中，上面的css代码从Firefox 7.0.1和Opera 11.64开始都显示正常，看来都是从很古老的文章中转来的了。
本文结束。
Leave a comment