您的位置:首页> 日志> 前端技术 正文

在头条图文列表中,我们可以定义标题和简介的字符数量进行控制显示,但是在侧栏宽度比较小时为了让标题能显示更完整内容要显示成2行,而有的标题比较短可以一行显示完,通常我们是定义简介内容字符数量要定义少一行(如下左图),以防字数过多就会出现超出高度情况 (如下右图)。

那我们是不是可以通过简单修改一下标签,让简介根据标题字数进行自动截取简介字数,或者设置一个字符数量差值的参数呢? 因为容器宽度不一定,所以自动判断一行标题字数好像行不通,那我们可以考虑用字符数量差来实现看看。

首先声明一个参数标题长度差距值

<attributes>
    <name>titleWidthDiffer</name>
    <datatype>int</datatype>
    <default>0</default>
    <intro>设置一行与两行标题长度差距</intro>
  </attributes>
 
……
 
<xsl:param name="titleWidthDiffer" />
 
……
 
<xsl:choose>
<xsl:when test="Intro != ''">
<xsl:choose>
<xsl:when test="string-length(Title) * 2 - $titleWidthDiffer &gt; 0">
<xsl:value-of disable-output-escaping="yes"  select="pe:CutText(pe:RemoveHtml(Intro),$topicContentLength - $titleWidthDiffer,'…')" />
</xsl:when>
<xsl:otherwise>
<xsl:value-of disable-output-escaping="yes"  select="pe:CutText(pe:RemoveHtml(Intro),$topicContentLength,'…')" />
</xsl:otherwise>
</xsl:choose>
</xsl:when>
 
<xsl:otherwise>
<xsl:choose>
<xsl:when test="string-length(Title) * 2 - $titleWidthDiffer &gt; 0">
<xsl:value-of disable-output-escaping="yes" select="pe:CutText(pe:RemoveHtml(Content),$topicContentLength - $titleWidthDiffer,'…')" />
</xsl:when>
<xsl:otherwise>
<xsl:value-of disable-output-escaping="yes"  select="pe:CutText(pe:RemoveHtml(Content),$topicContentLength,'…')" />
</xsl:otherwise>
</xsl:choose>
</xsl:otherwise>
</xsl:choose>
 
模板调用代码
 
{PE.Label id="头条图文信息列表" outputQty="9" topicNum="9" titleLength="20" nodes="0" listOrderType="20" displayTips="true" topicTitleLength="40"  titleWidthDiffer="20"topicContentLength="58" topicDisplayNodeName="false" topicDisplayPic="true" imageWidth="90" imageHeight="70"/}
 
 
就这么简单就可以了。最终显示效果如下图: