内容超出时以点点显示,编程方法和CSS方法

接收 CSS 能够达成内容超过时以点点(省略号)显示,代码如下:

图片 1

li { width:100px; overflow:hidden; white-space:nowrap;
text-overflow:ellipsis; }

在顾客控件的repeter控件中放了二个<li>:

如上代码,li 中的文字超过时,将以 … 展现。li 中饱含 a
也是能够实现的,宗旨是 text-overflow:ellipsis;(CSS 3 内容)。可是要是 a
是 display:block; 的,则不行,这种景观下,大家理应对 a 写上边的 CSS。

<li class=”goodsname”>
        <a id=”A2″ target=”_blank” title='<%#
Eval(“ProductName”) %>’ href='<%#
Eval(“ProductID”,”~/ViewProduct.aspx?ID={0}”) %>’
runat=”server”>
            <%# Eval(“ProductName”) %></a>
</li>

约等于说要落到实处点点效果的要素必需是 block 的,同期其内部无法再有 block
的因素。

希望商品名超链接文字只展示行,超过2行范围的用…显示。

有2个方法能够实现,第意气风发:

把 <%# Eval(“ProductName”) %> 改写为 <%# GetString(
Eval(“ProductName” )) %>

下一场在客户控件.cs文件中加多上边那么些方法:

 

protected string GetString(object obj)
{
    string str = Convert.ToString(obj);
    string strReturn = “**”;     
    if (!string.IsNullOrEmpty(str))
    {
     //借使商品名在首页最新商品列表中中国足球球联赛越2行,将超过的文字简洁明了为…
        if (str.Length > 34)
        {
            strReturn = str.Substring(0, 34) + “…”;
        }
        else
        {
            strReturn = str;
        }
    }
    return strReturn;
}

 

其次种方式只好让抢先生机勃勃行范围的文字呈现为…, 多行不可能利用那一个法子:

div+css设置列表li超过部分显得省略号

在网页设计中,会遇上文件超越一定长度引致全体的网页变形的景观。技士往往须求截取固定的尺寸来完成有个别固定长度的决定。介绍风华正茂种直接运用CSS
的代码调控来得以达成公文截取的法子。与技术员的直接字符截取的法子有个别分化,其优势是足以自行调整文件显示的长度;短处是分歧浏览器的宽容性并不到家。使用到
overflow,text-overflow,white-space
那四个第生机勃勃的特性,其余的代码归于修饰功用。

发表评论

电子邮件地址不会被公开。 必填项已用*标注