ZCMS模板中文章列表的响应式设计
在ZCMS模板制作中,首页往往用到很多文章列表,在果文章列表区的宽度是固定的,我们往往将模板写成这样。
<ul class="list-unstyled">
 <cms:article catalogalias="caijing" count="6" level="CurrentAndChild">
  <z:list>
   <li>·<a href="${Article.Link}" title="${Article.Title}">${charWidth(Article.Title, 46,"...")}</a>
   </li>
  </z:list>
 </cms:article>
</ul>
通过charWidth函数将标题截断,以防止标题换行,页面发布后得到的列表效果如下:

efd8a0b16c9b44fba7f5bfe789de15ab


但是在响应式布局的情况下,列表的宽度是会变化的,在屏幕为某些宽度下,列表更宽,这时候标题的截断就显得非必要,效果如下:

f0bb3fe9618f447abae3db5f5d9c0afe


所以在响应式布局的页面,列表标题是不应该由后端截断,如图,不截断标题的情况下列表呈现成如下的效果:

a2e3ff60a54642898f22cca3af374fc3


可通过样式控制,让标题只显示一行,将超过一行的内容隐藏(包括标题后面跟的时间)也隐藏,得到如下效果的列表:

05c50d85ec164f70be7a8bfef269a21e


在列表因响应式布局在某些情况下更宽或更窄时也能较好的呈现,如下:
更宽时

112075ab5a3d47afb380c8ab32223213


更窄时

c50f2be0805a42919f2d8d28715001ba


HTML结构如下
<ul class="list-news">
 <cms:article catalogalias="caijing" count="6" level="CurrentAndChild">
  <z:list>
   <li><a href="${Article.Link}" title="${Article.Title}">${Article.Title}</a>
   <span class="time"> ${format(Article.PublishDate,'hh-mm')}</span>
   </li>
  </z:list>
 </cms:article>
</ul>
关键样式如下
.list-news li {
 padding-left: 13px;
  background: url(image/news_dot.png) no-repeat 0 0;
 height: 24px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.list-news .time {
  float: right;
 font-size: 12px;
 color: #9fadcd;

}

注意设置文字溢出显示省略号,这样提示标题未显示完:

888E240DAEF549A38B913054DEB19BBB

hackIE